CSS IOS Safari 中存在滚动错误

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/29072829/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-30 03:05:10  来源:igfitidea点击:

There's a scroll bug in IOS Safari

ioscssscrollsafari

提问by Andreas Heintze

I have the the third generation iPad with a retina display with the latest version of IOS 8.2. If you open Safari and go to the page below which I have created as a test.

我的第三代 iPad 配备了最新版本的 IOS 8.2 视网膜显示屏。如果您打开 Safari 并转到下面我作为测试创建的页面。

http://bagaren-se.dev.sitedirect.se/test.html

http://bagaren-se.dev.sitedirect.se/test.html

If you hold your iPad in landscape mode and click on the button "Click to show/hide" then a fixed div is shown with some dummy text in it. You can now scroll the content of that div. If you click "Click me!!" in there another hidden div is shown with some more dummy text and you can still scroll the content in the div, but...

如果您将 iPad 保持在横向模式并单击“单击以显示/隐藏”按钮,则会显示一个固定的 div,其中包含一些虚拟文本。您现在可以滚动该 div 的内容。如果你点击“点击我!!” 在那里,另一个隐藏的 div 显示了一些更多的虚拟文本,您仍然可以滚动 div 中的内容,但是......

If you now close the second div by clicking "Click me!!" again and the you close the first div by clicking the first button again. Then you turn your iPad to see the page in portrait mode and do the same thing, the content of the div does not scroll when you try to scroll it, just the background! Why is this and is there a way around it?

如果您现在通过单击“单击我!!”关闭第二个 div 再次单击第一个按钮关闭第一个 div。然后你转动你的 iPad 以纵向模式查看页面并做同样的事情,当你尝试滚动时,div 的内容不会滚动,只是背景!为什么会这样,有没有办法解决它?

If you leave the "Click me!!" div content open when you close the first div and then open the first div again, then it all works.

如果你离开“点击我!!” 当您关闭第一个 div 然后再次打开第一个 div 时,div 内容会打开,然后一切正常。

The first div have max-height:760px; and overflow:auto; set.

第一个 div 有 max-height:760px; 和溢出:自动;放。

Do you see the problem? The way I see it, the content of the first div should always scroll if it's height is larger that 760px, but it doesn't work in Safari IOS 8.2. Is there a hack to get around this problem? The div must be position:fixed;.

你看到问题了吗?在我看来,如果第一个 div 的高度大于 760px,它的内容应该总是滚动,但它在 Safari IOS 8.2 中不起作用。有没有办法解决这个问题?div 必须是 position:fixed;。

回答by ztaff

We encountered something similar. Scroll just stopped in some views after upgrade to ios 8.2. This is in a div that fills with content dynamically. This helped me ion the track: http://patrickmuff.ch/blog/2014/10/01/how-we-fixed-the-webkit-overflow-scrolling-touch-bug-on-ios/

我们遇到了类似的事情。升级到 ios 8.2 后,滚动只是在某些视图中停止。这是在动态填充内容的 div 中。这帮助我找到了轨道:http: //patrickmuff.ch/blog/2014/10/01/how-we-fixed-the-webkit-overflow-scrolling-touch-bug-on-ios/

We applied the fix as a hack for ios only with JavaScript (since we use angular it's really a directive).

我们仅使用 JavaScript 将修复程序作为 ios 的 hack 应用(因为我们使用 angular 它实际上是一个指令)。