If you've ever had an offcanvas menu with pure CSS, you will know the struggles of keeping it purely in CSS.

A customer of my employer has an entirely offcanvas menu with pure CSS, based on a customized version of Bootstrap 3 series. It works most of the time - until one day we were getting a bug on Android with Chrome. The menu would not render, but would render the background.

Invisibility activated!

For some reason, just specific to Chrome on Android, the UI would not render properly. After countless searching, I ran into this bug on Chrome's bug tracker which effectively described what I was seeing.

The solution was simple

We needed to force Chrome to repaint, that's a quick CSS block, and we're off to the races:

@media (max-width: 480px) {
  .offcanvas-navigation {
    -webkit-transform: translateZ(0) !important;
  }
}

It worked on Chrome, but alas we broke Firefox - for some reason Firefox on desktop and mobile does not like translateZ(0), forcing the menu to now render on Chrome, but not render on Firefox!

Back to the drawing board

We scrapped the menu, and refactored it - relying on 10 lines of javascript to paint the menu properly - it works everywhere - but it's no longer a CSS only menu.

chrome browser

Mike

Senior Software Engineer, Labber, Sysadmin. I make things scale rapidly. Optimize everything.

Read More