Fixed Element scrolling within parallax element
<p>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:</p>

<pre><code>.parallax {
    perspective: 1px;
    height: 100vh;
    overflow-x: hidden;
     overflow-y:auto;
}
</code></pre>

<p>Where the original body element has this css:</p>

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

<p>And the original nav has this css:</p>

<pre><code>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;
}
</code></pre>

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

<p>All of this is within this representation of the html:</p>

<pre><code>&lt;body class="parallax"&gt;
    &lt;header&gt;&lt;/header&gt;
    &lt;div&gt;&lt;/div&gt;
    &lt;nav&gt;&lt;/nav&gt;
&lt;/body&gt;
</code></pre>

<p>Why did it break?</p>

<p>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</p>

<p>Here is the <a href="https://jsfiddle.net/7hq3bp9y/" rel="nofollow">fiddle</a></p>

<p><em>(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)</em></p>