Hi, folks!
I’m currently building an off-canvas menu for a project, using position:fixed for setting the layout and css transform and transition to show / hide the menu.
Working on that, I faced an strange behavior of the layout. If I open in a narrow window to check the mobile version with the off-canvas menu, everything is fine, the menu is correctly positioned and have 100% height, like I want it to have. But, if I resize the window, the menu loses its 100% height, and the element gets the parent height (also using position: fixed). If I replace the css transform: translateX() with normal positioning using left: n pixels, the problem goes away, but I want to use transform because it’s smoother.
You can check this pen that reproduces the behavior. Play with the menu button to open / close the menu first, then open the menu and resize the view to check the issue.
Has anyone faced this issue too? If yes, how can I avoid that? And more important: why this is happening?
I’ve tested it in Google Chrome, Firefox and Mobile Chrome (iOS).
