efong5 efong5 - 6 months ago 25
CSS Question

Fixed Element scrolling within parallax element

I'm running into an issue where a fixed element (The nav) moves when the body element is used as a parallax container with the following css:

.parallax {
perspective: 1px;
height: 100vh;
overflow-x: hidden;
overflow-y:auto;
}


Where the original body element has this css:

html,body {
width: 100%;
margin: 0px;
margin-bottom: -1.4rem;
overflow-x: hidden;
display: block;
font-size: 10px;
}


And the original nav has this css:

nav {
position: fixed;
top: 0rem;
right: 0rem;
height: 100%;
/*animation*/
transition-timing-function: all ease 0.3s;
-webkit-transition: all ease 0.3s; /* Safari */
transition: all ease 0.3s;
}


Where the fixed position style only breaks when the parallax class is applied to the body element.

All of this is within this representation of the html:

<body class="parallax">
<header></header>
<div></div>
<nav></nav>
</body>


Why did it break?

Edit to clarify some confusion: no javascript is involved, the parallax container class is shown above, nothing else has been added. Upon inspection, the nav element still has the fixed position style applied to it

Here is the fiddle

(As an aside, I know the work-around is to add parallax to a different container instead, and have the nav outside of that container, but in order to make sure iOS shrinks the url bar the body needs to be the element that scrolls)

Answer

The issue is due to perspective being added via the .parallax class.

This cannot be overcome.

Any time you add transform (which is what perspective is) to an element, it becomes the positioning "base" for any positioned children, including position: fixed. Your position:fixed nav element becomes fixed relative to the transformed parent