iframe on iOS (iPad) content cropping issue

后端未结

关注

 3  787

I\'m looking for the correct way to assure that dynamically revealed content is visible after scrolling in an iframe on ipad / iOS5.

Oh Iframes and iPad - w

相关标签:

3条回答

北恋

2020-12-28 23:50

This is a very tedious problem, especially if you are in a scenario where you must use a dynamically scaling iframe, in my case with the YouTube iframe API. You are not able to control the scroll properties of the iframe. It doesn't even work if you modify the iframe elements in the ios simulator/safari debug window.

The best solution that I found was to use negative positioning to remove the excess whitespace. Android may have mixed results so you have to use browser detection and apply that way.

0 讨论(0)
发布评论:

提交评论
- 加载中...
再見小時候

2020-12-28 23:53
I found I was also able to solve the problem by making the document as tall as the iframe content. (As suggested Iframe Content Not Rendering Under Scroll In iOs5 iPad/iPhone) But in my case I didn't want the user to be able to scroll down in the now tall app, because its supposed to be a fullscreen application. I used this code to prevent vertical scrolling:
```
/*
Prevent Scrolling down.
 */
$(document).on("scroll",function(){
    checkForScroll();
});

var checkForScroll = function(e)
{
    var iScroll = $(document).scrollTop();
    if (iScroll > 1){
        // Disable event binding during animation
        $(document).off("scroll");

        // Animate page back to top
        $("body,html").animate({"scrollTop":"0"},500,function(){
            $(document).on("scroll",checkForScroll);
        });
    }
}
```
I evaluated a lot of options and wrote this blog post, including test code. http://dev.magnolia-cms.com/blog/2012/05/strategies-for-the-iframe-on-the-ipad-problem/

Hope this helps, Topher
0 讨论(0)
发布评论:

提交评论
- 加载中...
旧时难觅i

2020-12-29 00:10
I'm assuming there is a bug in iOS safari in how it treats iframes with defined width / height. Without width / height being defined it tries to scale them automatically to fit their content without any scrolling needed.

The best workaround I've found is to not scroll the iframe at all, but rather to scroll a wrapper div inside the framed-in page.

Here's an example:
```
<iframe id="stupid-iframe" width="600" height="200" src="a-file.html"></iframe>
```
a-file.html:
```
<html>
<body>
<div id="wrapper" style="width: 100%; height: 100%; overflow: auto; -webkit-overflow-scrolling: touch;">
...all my normal content...
</div>
</body>
</html>
```
0 讨论(0)
发布评论:

提交评论
- 加载中...