iPad Safari 滚动导致 HTML 元素消失并延迟重新出现

iPad Safari scrolling causes HTML elements to disappear and reappear with a delay

提问by codeBearer

I'm currently developing a web app using html5 and jQuery for iPad Safari. I'm running into a problem wherein large scroll areas cause the elements that are offscreen to appear after a delay when I scroll down to them.

我目前正在使用 html5 和 jQuery 为 iPad Safari 开发一个网络应用程序。我遇到了一个问题，其中大滚动区域会导致当我向下滚动到它们时延迟出现屏幕外的元素。

What I mean by that is, if I have a row of images (or even a div with a gradient) that is offscreen, when I scroll down (or up) to it, the expected behavioris for the element to appear on screen as I am scrolling to it.

我的意思是，如果我有一排图像（甚至是带有渐变的 div）在屏幕外，当我向下（或向上）滚动到它时，预期的行为是元素在屏幕上显示为我正在滚动到它。

However, what I'm seeing is that the element does not appearuntil I lift my finger off the screen and the scroller finishes all its animations.

但是，我看到的是，直到我将手指从屏幕上移开并且滚动条完成所有动画后，元素才会出现。

This is causing a super noticeable problem for me, making the whole thing look choppy, although it is not. I'm guessing the iPad Safari is trying to do something to save memory. Is there any way in which I can prevent this choppy-ness from happening. Additionally, I would also appreciate if anyone can shed light on what the iPad Safari is actually trying to do.

这给我造成了一个非常明显的问题，使整个事情看起来波涛汹涌，尽管事实并非如此。我猜 iPad Safari 正在尝试做一些事情来节省内存。有什么办法可以防止这种不稳定的发生。此外，如果有人能阐明 iPad Safari 实际尝试做的事情，我也将不胜感激。

采纳答案by codeBearer

This is the complete answer to my question. I had originally marked @Colin Williams' answer as the correct answer, as it helped me get to the complete solution. A community member, @Slipp D. Thompson edited my question, after about 2.5 years of me having asked it, and told me I was abusing SO's Q & A format. He also told me to separately post this as the answer. So here's the complete answer that solved my problem:

这是我问题的完整答案。我最初将@Colin Williams 的答案标记为正确答案，因为它帮助我找到了完整的解决方案。社区成员@Slipp D. Thompson 在我问了大约 2.5 年后编辑了我的问题，并告诉我我滥用了 SO 的问答格式。他还告诉我单独发布这个作为答案。所以这是解决我的问题的完整答案：

@Colin Williams, thank you! Your answer and the article you linked out to gave me a lead to try something with CSS.

@科林威廉姆斯，谢谢！你的回答和你链接到的文章给了我一个尝试使用 CSS 的线索。

So, I was using translate3d before. It produced unwanted results. Basically, it would chop off and NOT RENDER elements that were offscreen, until I interacted with them. So, basically, in landscape orientation, half of my site that was offscreen was not being shown. This is a iPad web app, owing to which I was in a fix.

所以，我之前使用过 translate3d。它产生了不需要的结果。基本上，它会切断而不是渲染屏幕外的元素，直到我与它们交互。因此，基本上，在横向方向上，我在屏幕外的网站的一半未显示。这是一个 iPad 网络应用程序，因此我正在修复中。

Applying translate3d to relatively positioned elements solved the problem for those elements, but other elements stopped rendering, once offscreen. The elements that I couldn't interact with (artwork) would never render again, unless I reloaded the page.

将 translate3d 应用于相对定位的元素解决了这些元素的问题，但其他元素一旦离开屏幕就停止渲染。我无法与之交互的元素（艺术品）将永远不会再次呈现，除非我重新加载页面。

The complete solution:

完整的解决方案：

*:not(html) {
    -webkit-transform: translate3d(0, 0, 0);
}

Now, although this might not be the most "efficient" solution, it was the only one that works. Mobile Safari does not render the elements that are offscreen, or sometimes renders erratically, when using -webkit-overflow-scrolling: touch. Unless a translate3d is applied to all other elements that might go offscreen owing to that scroll, those elements will be chopped off after scrolling.

现在，虽然这可能不是最“有效”的解决方案，但它是唯一有效的解决方案。移动 Safari 在使用-webkit-overflow-scrolling: touch. 除非将 translate3d 应用于可能由于该滚动而离开屏幕的所有其他元素，否则这些元素将在滚动后被切掉。

So, thanks again, and hope this helps some other lost soul. This surely helped me big time!

所以，再次感谢，并希望这能帮助其他一些迷失的灵魂。这肯定对我有很大帮助！

回答by Colin Williams

You need to trick the browser to use hardware acceleration more effectively. You can do this with an empty 3d transform:

您需要欺骗浏览器以更有效地使用硬件加速。您可以使用空的 3d 变换来执行此操作：

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

Particularly, you'll need this on child elements that have a position:relative;declaration (or, just go all out and do it to all child elements).

特别是，您需要在具有position:relative;声明的子元素上使用它（或者，全力以赴对所有子元素执行此操作）。

Not a guaranteed fix, but fairly successful most of the time.

不能保证修复，但在大多数情况下相当成功。

Hat tip: https://web.archive.org/web/20131005175118/http://cantina.co/2012/03/06/ios-5-native-scrolling-grins-and-gothcas/

帽子提示：https: //web.archive.org/web/20131005175118/http: //cantina.co/2012/03/06/ios-5-native-scrolling-grins-and-gothcas/

回答by Guillaume Gautier

Targeting all elements but html : *:not(html)caused problems on other elements in my case. It modified the stacking context, causing some z-index to break.

针对除 html 之外的所有元素： *:not(html)在我的情况下导致其他元素出现问题。它修改了堆叠上下文，导致一些 z-index 中断。

We should better try to target the right elementand apply -webkit-transform: translate3d(0,0,0)to it only.

我们应该更好地尝试定位正确的元素并仅应用于-webkit-transform: translate3d(0,0,0)它。

Edit : sometimes the translate3D(0,0,0)doesn't work, we can use the following method, targeting the right element :

编辑：有时translate3D(0,0,0)不起作用，我们可以使用以下方法，针对正确的元素：

@keyframes redraw{
    0% {opacity: 1;}
    100% {opacity: .99;}
}

// ios redraw fix
animation: redraw 1s linear infinite;

回答by Fellipe Lima

When the translate3d doesn't work, try to add perspective. It always works for me

当 translate3d 不起作用时，尝试添加透视图。它总是对我有用

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

http://blog.teamtreehouse.com/increase-your-sites-performance-with-hardware-accelerated-css

http://blog.teamtreehouse.com/increase-your-sites-performance-with-hardware-accelerated-css

回答by Alexander Poleschuk

Adding -webkit-transform: translate3d(0,0,0)to an element statically doesn't work for me.

-webkit-transform: translate3d(0,0,0)静态添加到元素对我不起作用。

I apply this property dynamically. For example, when a page is scrolled, I set -webkit-transform: translate3d(0,0,0)on a element. Then after a short delay, I reset this property, that is, -webkit-transform: noneThis approach seems to work.

我动态应用这个属性。例如，当页面滚动时，我设置-webkit-transform: translate3d(0,0,0)了一个元素。然后经过短暂的延迟，我重置了这个属性，也就是说，-webkit-transform: none这种方法似乎有效。

Thank you, @Colin Williams for pointing me in the right direction.

谢谢@Colin Williams 为我指明了正确的方向。

回答by yudarik

I had the same issue with iscroll 4.2.5 on ios7. The whole scroll element just disappear. I've tried to add translate3d(0,0,0)as was suggested here, it have solved the problem, but it disabled the iscroll "snap" effect. The solution came with giving "position:relative; z-index:1000;display:block"css properties to the whole container that holds the scroll element and there is no need to give translate3d to child elements.

我在 ios7 上使用 iscroll 4.2.5 遇到了同样的问题。整个滚动元素就消失了。我尝试translate3d(0,0,0)按照此处的建议进行添加，它已解决了问题，但它禁用了 iscroll“快照”效果。解决方案是为"position:relative; z-index:1000;display:block"包含滚动元素的整个容器提供css 属性，并且无需将 translate3d 提供给子元素。

回答by Nidhin Joseph

At time translate3dmay not work, in those cases perspectivecan be used

有时translate3d可能不起作用，在这些情况下perspective可以使用

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

回答by yavuzkirez

I faced this problem in a Framework7 & Cordova project. I tried all the solutions above. They did not solve my problem.

我在 Framework7 & Cordova 项目中遇到了这个问题。我尝试了上述所有解决方案。他们没有解决我的问题。

In my case, I was using 10+ css animations on the same page with infinite rotation (transform). I had to remove the animations. It is ok now with the lack of some visual features.

就我而言，我在同一页面上使用了 10 多个 css 动画，并且无限旋转（变换）。我不得不删除动画。现在可以了，缺少一些视觉特征。

If the solutions above do not help you, you may start eliminating some animations.

如果上述解决方案对您没有帮助，您可以开始消除一些动画。

回答by funador

the -webkit-transform: translate3d(0, 0, 0);trick didn't work for me. In my case I had set a parent to:

这个-webkit-transform: translate3d(0, 0, 0);技巧对我不起作用。就我而言，我已将父级设置为：

// parent
height: 100vh;

Changing that to:

将其更改为：

height: auto;
min-height: 100vh;

Solved the issue in case someone else is facing the same situation.

解决了问题，以防其他人面临同样的情况。

回答by Adam Touhou

I had the same issue using an older version of Fancybox. Upgrading to v3 will solve your problem OR you can just add:

我在使用旧版本的 Fancybox 时遇到了同样的问题。升级到 v3 将解决您的问题，或者您可以添加：

html, body {
    -webkit-overflow-scrolling : touch !important;
    overflow: auto !important;
    height: 100% !important;
}