Menu
To see the problem clearly. Please take a look on the following YouTube video.
Position fixed elements jump around when redirecting iframe
or try the widget on this site (iPad)
Naiise
Note: The site in video is different from the site above since the owner doesn't wanna use the widget anymore before the problem is fixed. But they are having the same problem.
One more thing: All fixed elements on the parent site jump around not only the iFrame. It likes, on iPad, the fixed elements need to be recalculated position when redirecting pages inside an iFrame.
Here is a simple code that I created to simulate the issue. Please create a html file from it and run it on iPad simulator or real device to see the problem.
<html>
<body style="height: 10000px">
<div style="color: #ffffff; width: 200px; height: 100px; background: red; position: fixed; left: 20px; bottom:300px;">
Other fixed element
</div>
<iframe style="height: 500px; width: 420px; position: fixed; bottom: 95px; right: 20px;" src="https://printskitchen.eber.co" />
</body>
</html>
528
The problem is caused by the translate3d transformation that you apply on the iframe;
-webkit-transform: translate3d(0, 0, 0);
There is a well known problem in which translate3d causes position:fixed elements to behave like position:absolute in certain webkit browsers, such as those on iOS, as well as certain desktop versions of chrome.
Here is a demo which demonstrates the bug in action:
html,
body {
width:100%;
height:100%;
margin:0;
padding:0;
transform: translate3d(0, 0, 0);
}
#nav{
width:100%;
height:10%;
position:fixed;
top:0;
left:0;
background-color:red;
}
#content {
width:100%;
height:500%;
}<!DOCTYPE html>
<html>
<body>
<nav id="nav">
</nav>
<main id="content">
</main>
</body>
</html>In the demo, the red nav should be visible even after scrolling down. Depending on your browser, this may or may not work properly as is. Removing the problematic -webkit-transform: translate3d(0, 0, 0); style makes it work properly across all browsers.
This bug occurs due to the transform creating a new coordinate system, causing the position:fixed element to become affixed to the transformed element instead of the viewport.
I myself came across this bug while trying to smooth out transitions on iOS, and created a post about it here. More information can be found on this thread which I have also linked to in my own post.
The only surefire fix I know of is to remove the problematic translate3d style. If it is necessary, for example in order to coax iOS into enabling hardware acceleration (which is what I needed it for), then try applying it to different elements, either parents (body, html), or children of the iframe holder. I found that applying it to a completely unrelated element gave me the desired result.
There are also several case-specific workarounds and fixes in the thread I have linked to. One of those might do the trick.
It is a pretty nasty bug to track down. Took me a while to find it on my own page.
Best of luck.
169
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
