translate3d(0%, 0px, 0px); is causing issues with my position fixed element. In my demo, you'll notice that clicking the button should open up the content just fine, but it is supposed to stay fixed at the top in a position fixed.
Therefore, when scrolling down with my container (which contains placeholder images), then clicking the button, the hidden content should always open up with the Google image staying fixed at the top.
<html>
<div class="container">placekitten images</div>
<button>LOADED-CONTENT comes in translate3d(0%, 0px, 0px)</button>
</html>
<html>
<div class="sticky">Google image always on top.</div>
<button>back button slides the loaded content translate3d(100%, 0px, 0px)</button>
</html>
How can I resolve the issue where translate3d is interfering with the position fixed property?