Position fixed elements jump around when loading or redirecting iframe (iPad only)

Question

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>

Both the sites are different. Could you share the link in the video ? — AmitJS94, Jul 26 '17 at 11:19
They are using same widget and had the same problem. Because the site is reporting the issue don't wanna use the widget anymore before the problem is fixed, I can't give you the link. — Hoang Trung, Jul 26 '17 at 13:02
@HoangTrung are you using any custom style to the plugin to change its position.? — Jithin Raj P R, Jul 31 '17 at 09:04
@JithinRajPR No, I don't. I only use css for the position. It just likes when redirecting inside the iFrame, it affects to fixed position elements. If you notice, in the above site, the chat plugin which is fixed position also jump around. — Hoang Trung, Jul 31 '17 at 11:08
@HoangTrung Did you tried using `!important` after your style - `position:fixed !important` — Jithin Raj P R, Jul 31 '17 at 11:50
@AmitJS94 The link in the video is [ionmagazine.co.uk](http://ionmagazine.co.uk), you can see it pretty easily. — Clonkex, Jul 31 '17 at 22:42
@stybl no this is only transform css that i used for iframe holder -webkit-transform: translate3d(0, 0, 0); — Hoang Trung, Aug 01 '17 at 05:07
@HoangTrung, In your console can you check if the style is overwritten by plugins style.? and which is the style which is overwriting your style.? — Jithin Raj P R, Aug 01 '17 at 05:38
@HoangTrung Your websites URL is invalid. Could you provide some fiddle or fix it? — maszynka, Aug 02 '17 at 12:25

stelioslogothetis · Answer 1 · 2017-08-01T13:17:12.170

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.

Actually I got the problem before adding transform3d style. I just added it to see if it can fix the problem. As you suggest, I also removed it to check but it doesn't work. Still jumping around when redirect the iframe. — Hoang Trung, Aug 02 '17 at 03:23

score 1 · Answer 2 · answered Aug 03 '17 at 08:22

I figured out that if you change the position from fixed to absolute it'll work perfectly. You can follow the following tutorial to emulate the fixed position by abosolute position https://gabrieleromanato.name/jquery-emulate-css-fixed-positioning-on-mobile-browsers

score 0 · Answer 3 · answered Aug 02 '17 at 10:48

0

Try to avoid changing height and display property (you should remove opacity as well). Instead, give #iframe-holder will-change: transform; and try to: transform: translateX(150%); when widget should be collapsed.

It should not cause widget to render again (the problem might be rendering issue), and you will benefit in performance.

answered Aug 02 '17 at 10:48

maszynka

196
4
11

Thanks. There is no problem with collapsing widget, it's about redirecting pages inside an iFrame affect to all fixed position elements in the parent site not only the iFrame, but I also updated my code follow your suggestion, unfortunately the problem is still there. – Hoang Trung Aug 02 '17 at 11:49
It looks for me as an issue with size change, position or display property (it shouldn't move if it's not the case).Please provide some fiddle with code that will reproduce the problem. – maszynka Aug 02 '17 at 22:44
Added the demo code in question description. Please run it on iPad to see the problem. – Hoang Trung Aug 03 '17 at 03:10

Position fixed elements jump around when loading or redirecting iframe (iPad only)

3 Answers3