Encountering a problem where a fixed element (the navigation) shifts when the body element is utilized as a parallax container with the following CSS:
.parallax {
perspective: 1px;
height: 100vh;
overflow-x: hidden;
overflow-y:auto;
}
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 element is styled like this:
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;
}
This issue only arises when the parallax class is added to the body element.
All of this code is within the structure of the HTML below:
<body class="parallax">
<header></header>
<div></div>
<nav></nav>
</body>
Why did it cause a problem?
To clarify, there is no JavaScript involved and only the parallax container class is applied. Upon checking, the fixed position style remains on the nav element.
Here is the link to the fiddle
(On a side note, I understand that the workaround is to apply parallax to a different container and keep the nav outside that container. However, in order for iOS to shrink the URL bar, the body needs to be the scrolling element)