NO BUG: Nav Menu flexbox issues in older browsers

Bugs
21

@aslotta it’s a large membership site. People access the site through just about every device type possible. Woo is part of the site obviously.

22

Well, the browser is objectively outdated if doesn’t support features introduced in all major browsers between mid-2020 and early 2021.

As soon as the fix is implemented, I will let you know.

23

Many thanks @timmse :slightly_smiling_face:

24

Hi @timmse looks like 1.7.3 doesn’t address this issue. Could you tell me how it will be referenced in the changelog when it is fixed so I can spot it?

25

Hi @timmse I am sure you are fed up with me asking about this - honestly, so am I.

But the reality is that I am stuck on 1.6.2 and cannot update Woocommerce now because of outdated templates in 1.6.2. This situation will only get worse as time goes by.

Would it be possible for you to provide a manual fix I can apply which I can then remove once the issue is fixed natively?

1 Like
26

Hi,
I went with the updates to fix other problems, but the issue with the menu remains.
Is there maybe a workaround as a quick fix?

1 Like
27

@timmse please can you provide any update on this?

1.8 has a whole new menu options - will this resolve the issue?

1 Like
28

@timmse I also find this is annoying. Any manual fix yet?

29

@Jonas I did check my code on your site and it works.

@Alexa @harryb @timmse

This code works for my site. You can check if it works for yours.

root  ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden:
}

root li {
  float: left;
}

root li a {
  display: block;
  text-align: center;
  text-decoration: none;
}

root .sub-menu li {
    float: none;
  	
  	
}


root .sub-menu a{
	
  text-align: left;
}



root li ul  {
	display: none;
}

root li:hover > ul{
	display: block;
  z-index: 99999;
    position: absolute;
}

root ul ul ul {
  left: 100%;
  top: 0;
}

You can check my site here with Safari 13.1.2

1 Like
30

Hi everyone,

Just wanted to update this thread since it was still marked as “WIP”. We’ve already addressed this topic and the broader context around it in a separate thread last year: WIP: [class*="brxe-"] max-width 100% is too intrusive - #44 by charaf.

To summarize: we’ve decided not to implement a workaround or fallback for older browsers that don’t support CSS features already marked as Widely Available under Baseline. This includes :where, which has been interoperable across all major modern browsers for some time now.

Supporting the small number of devices that fall below this threshold would force regressions and architectural compromises for everyone else. We’re focused on delivering the best possible experience for the majority of users, and that means aligning with a stable, modern CSS baseline.

If you’re still affected and need a temporary fix, you’re free to explore a custom CSS fallback, like the one shared above. Thank you for understanding!

1 Like