All geek questions in one place

Fixed elements positioning occurs when loading or redirecting iframe (iPad only)

To see the problem clearly. Check out the following YouTube video. Set fixed elements when redirecting iframe

or try the widget on this site (iPad) Naiise

Note. The video site is different from the site above because the owner does not want to use the widget anymore before the problem is fixed. But they have the same problem.
One more thing: all fixed elements on the parent site are jumping not only on the iFrame. He likes it on the iPad, fixed elements need to be recounted when redirecting pages inside the iFrame.


Here is a simple code that I created to simulate a problem. Please create an html file from it and run it on the iPad simulator or on a 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>
+5
source share
3 answers

The problem is caused by the translate3d transform that you apply in the iframe ;

 -webkit-transform: translate3d(0, 0, 0);

There is a known issue in which translate3d causes position:fixed elements to behave like position:absolute in some webkit browsers, such as those on iOS, as well as some desktop versions of chrome.

Here is a demo demonstrating a mistake 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 navigator should be visible even after scrolling down. Depending on your browser, this may or may not work properly. Removing the problematic style -webkit-transform: translate3d(0, 0, 0); allows you to work correctly in all browsers.

This error occurs due to a transformation creating a new coordinate system, causing the position:fixed element to attach to the transformed element instead of the viewport.

I myself came across this error while trying to smooth out transitions on iOS and created a post about it here . More information can be found in this thread , which I also linked to in my own post.

The only fix I know is to remove the problematic translate3d style. If it is necessary, for example, in order to coax iOS, to enable hardware acceleration (for which I need it), try to apply it to various elements: parent (body, html) or children of the iframe owner. I found that applying it to a completely unrelated element gave me the desired result.

There are also some workarounds and fixes for specific cases in the thread I am attached to. One of them can do the trick.

This is a pretty nasty bug to track. Spent me finding it on my page.

Good luck.

+5
source

I realized that if you change the position from fixed to absolute, it will work perfectly. You can follow the following guide to emulate a fixed position by abosolute position https://gabrieleromanato.name/jquery-emulate-css-fixed-positioning-on-mobile-browsers

+1
source

Try to avoid changing the height and display properties (you must also remove the opacity ). Instead, give # iframe-holder will-change: transform; and try: transform: translateX(150%); when the widget should be minimized.

This should not cause the widget to display again (the problem may be a problem for presentation), and you will benefit from performance.

0
source

Source: https://habr.com/ru/post/1270144/

More articles:


All Articles