Flickering responsive nav menu on screen resize
So I'm working on a responsive nav menu, and it flickers on the resizing of the screen. See added video.
It also does it when there is no JS.
Codepen of a very simplified version of the nav (the same still happens): https://codepen.io/-evecodes/pen/GRYpKmW
I tried following one of Kevin's nav tutorials for it. His navigation does work without the flickering, but when I try to make it, it fails. The tutorial was this one:
https://www.youtube.com/watch?v=HbBMp6yUXO0
Any help/thoughts on how to possibly fix this are welcome!
Kevin Powell
YouTube
Responsive navbar tutorial using HTML CSS & JS
You can find the Frontend Mentor project here: https://www.frontendmentor.io/challenges/space-tourism-multipage-website-gRWj1URZ3
And the free Scrimba course here: https://scrimba.com/learn/spacetravel
š Links
ā
Why I use HSL: https://youtu.be/Ab9pHqhsfcc
ā
More on feature queries (@supports): https://youtu.be/wPI8CEoheSk
ā
More info on .sr-...
4 Replies
Managed to fix it. I removed the translateX, and used the left/right/etc properties instead. Also added the transition on those.
As a bit of a heads up, it's generally preferred to transition/animate
transform
rather than positioning properties for performance reasons.
Worst case is to use JS to deactivate all transitions when the browser is being resizedAh, I didn't know that, thanks! I'll look into a JS based solution.
So, I managed to make a JS solution to this problem as well. I noticed that the glitching only happened when my media query triggered so I focused towards that.
I split the transition css seperate, and using data-attributes (with setAttribute) instead of classes, I added it to a JS media query (same width as my regular mq). This solved the issue in Chrome and Edge. Firefox was still being glitchy unless I resized my browser really really slow.
The CSS added was:
(before mq)
(mq)
For Firefox I had to add a setTimeout/clearTimeout, the timeout set to 0, this helped with the glitching here.
Final JS code for the glitch fix:
Here's a codepen with the live code:
https://codepen.io/-evecodes/pen/QWZyXEB
In summary, my best guess for this glitching happening was that the added classes/attributes weren't acting fast enough when the media query triggered? From what I noticed the data-attributes were the fastest, but I read online that usually classes are? It's a bit of a headscratcher for sure haha.