Here is the pen : https://codepen.io/Supersudo/pen/PoPweJL
I have a dropdown inside a dropdown, the when the second dropdown is minimizing, it will ignore the z-index for a second then go back to its style when the animation is done.
It only seems to be a problem in Firefox and is caused by the fact that transformed elements create a new stacking context.
I can’t see an easy fix at the moment but I would suggest that you fade the menu out before it reaches the top bar. I would also move the transform JS to a CSS class to make it easier to manipulate. Lastly remove the magic number of -28rem and then use -100% instead.
This seems to work in Firefox.
I would then suggest that you tidy up the js and use event handlers instead of the onclick in the html.
2 Likes
Okay, I will. But I’ll try to fix it for the last time. Thanks for helping!
It seems that if you use this the following it will fix the issue in Firefox.
.nav ul{backface-visibility:hidden;}
However I still suggest that you adapt the js as in my example and use the CSS class to control the transforms. Always try to keep css out of the js. Also remove the -28rem as that is a magic number and is unreliable and use the -100% instead which will always work.
Working example:
1 Like
May I know why codepen does this? When I open the link, the fonts are big, then when I change it then revert to what it used to be, the fonts are smaller but I didn’t changed anything. Here is the capture
Yes I noticed that myself and came to the conclusion that is was a bug in codepen.
It seems to lose the font-size from the bootstrap file unless refreshed.
Codepen is great but it can’t mimic 100% a standalone web page.
1 Like
Weird, I tried the code in jsfiddle and jsbin and the bug (stutter) didn’t appear. Or maybe they have the same bug as codepen?
Edit: Yep, same bug like in codepen.
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.