To see the problem clearly. Please take a look on the following youtube video. https://youtu.be/71TvKDInmSY
or try the widget on this site (iPad) https://naiise.com
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.
1 Answers
Answers 1
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.
0 comments:
Post a Comment