Opacity rendering issues in Chrome?

[jupiterisland]

Hi!

I’m following this tutorial on responsive sidebars and I think I might have stumbled upon a bug in Chrome.
When I click on the hamburger menu button and the side bar opens it duplicates the ul/navbar for some reason. This only happens when I open my index.html on my browser, but when I use JSFiddle for example everything is ok. Also, whenever I delete the opacity it goes back to normal, so I deduced it has to be an opacity rendering issue in Chrome. Am I wrong?

Here everything seems to work fine:
https://jsfiddle.net/jupiterisland/6kmxh2v0/

But this is what I see when I open the index.html in Chrome:
https://www.codingforums.com/attachments/html-and-css/17546d1508913748-chrome-opacity-bug-sidebar-jpg

[giudev]

It could be a rendering issue that occurs during the transition from width 0 to width 250px in a position fixed div.
Adding backface-visibility: hidden to your side-nav menu should fix the problem.
(it’s just a fix, since backface-visibility is meant to handle different things)

Btw I suggest you to use a different approach to build your menu, try to have a look a this off-canvas solution here:
https://scotch.io/tutorials/off-canvas-menus-with-css3-transitions-and-transforms

[jupiterisland]

That did it!

Thank you :)

I’ll look into the off-canvas menu as well

[Author]

Posts