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

Home Forums CSS Strange behavior of fixed positioned element (100% height) and css transform

  • This topic is empty.
Viewing 1 post (of 1 total)
  • Author
  • #163276

    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).

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