The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Opacity rendering issues in Chrome?

  • This topic is empty.
Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
  • #261869


    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:

    But this is what I see when I open the index.html in Chrome:


    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:


    That did it!

    Thank you :)

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

Viewing 3 posts - 1 through 3 (of 3 total)
  • The forum ‘CSS’ is closed to new topics and replies.