iOS（iPad）上的iframe内容裁剪问题 [英] iframe on iOS (iPad) content cropping issue
问题描述
我正在寻找正确的方式，以确保在ipad / iOS5上的iframe中滚动后动态显示的内容可见。
I'm looking for the correct way to assure that dynamically revealed content is visible after scrolling in an iframe on ipad / iOS5.
哦，Iframes和iPad - 你真是个美妙的老chesnut。我知道：
Oh Iframes and iPad - what a wonderful old chesnut you are. I know that:
- iPad将iframe扩展到其中内容的完整高度（几乎就像使用HTML5的无缝属性，但不完全，因为它没有从父级继承样式或事件）。奇怪，很烦人，但确实如此。
-
< iframe height =100％>因此无用其内容不是容器 -
我需要将我的iframe包装在一个div中 - 一个
- iPad expands iframes to the full height of the content within it (almost like it was using HTML5's "seamless" property, but not quite since it doesn't inherit styles or events from the parent). Bizarre, annoying to many, but true.
<iframe height="100%">is therefore useless since it sizes to its content not to the containerI need to wrap my iframe in a div - a la
<div id="wrapper" style="-webkit-overflow-scrolling:touch;overflow:auto;">
<iframe width="100%" height="100%" src="about"blank"></iframe>
</div>
或者介绍一些欺骗（我认为这是基于这篇文章）
我的问题是iframe主体内部动态显示的内容（例如jquery标签，手风琴等）可能会导致浏览器在页面的显示范围内裁剪内容。
My issue is that content that is dynamically shown inside the iframe body (e.g. jquery tabs, accordion, etc) may cause the browser to crop the content at the display extent of the page.
例如，如果我的标签大部分位于iframe内部的可见视口中，我执行双指滚动（或实现单指scrollTop hack），然后将该内容滚动到视图中，其中一些内容之前未绘制的内容仍然未提取。点击查看nd tab / back再次导致内容显示为好像页面不绘制屏幕外内容。在此之后，如果我然后向上滚动到页面顶部，则不会为页面的开头绘制内容（之前可见）。使用双指滚动向上和向下滚动页面可以解决问题。
E.g. if my "tabs" are most of the way down the visible viewport inside the iframe and I perform a two-finger scroll (or implement the one finger scrollTop hack) then after that content is scrolled into view, some of its content that was previously not drawn remains undrawn. Clicking to a second tab / back again causes the content to appear as if the page doesn't draw off-screen content. After this, if I then scroll back up to the top of the page the content isn't drawn for the start of the page (which was previously visible). Scrolling the page up and down a few times with a two-finger scroll resolves the issue.
我读过这篇文章表明问题已得到解决。但它似乎没有完全修复;并且仍然没有解决这个问题，因为你必须将你的iframe包装在div中并在该div上放置滚动条，桌面浏览器可能显示双滚动条，具体取决于它们如何解释溢出：自动。
I had read this article that stated that the problem was fixed. But it doesn't seem to be fully fixed; and still doesn't get around the issue that because you have to wrap your iframe in a div and put scrollbars on that div, desktop browsers may show a double scrollbar depending on how they interpret overflow:auto.
ps我在iframe内部和外部使用HTML5样板页面，并使用正确的元视口设置。
p.s. I'm using HTML5 boilerplate page both inside and outside the iframe, with the correct meta viewport settings.
推荐答案
我假设iOS Safari中有一个错误，它如何处理具有定义宽度/高度的iframe。如果没有定义宽度/高度，它会尝试自动缩放它们以适应其内容而无需任何滚动。
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.
我发现的最佳解决方法是不滚动iframe所有，而是在框架页面内滚动一个包装div。
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.
这是一个例子：
<iframe id="stupid-iframe" width="600" height="200" src="a-file.html"></iframe>
a-file.html：
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>
这篇关于iOS（iPad）上的iframe内容裁剪问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
