iPad Safari 滚动会导致 HTML 元素消失并延迟重新出现 [英] iPad Safari scrolling causes HTML elements to disappear and reappear with a delay

问题描述

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

I'm currently developing a web application 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.

我的意思是，如果我有一排屏幕外的图像(甚至是带有渐变的 div)，当我向下(或向上)滚动到它时，预期的行为 是让元素在我滚动到它时出现在屏幕上.

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 behavior is for the element to appear on screen as I am scrolling to it.

但是，元素不会出现，直到我将手指从屏幕上移开并且滚动条完成其所有动画.

However, the element does not appear until I lift my finger off the screen and the scroller finishes all its animations.

这给我造成了一个非常明显的问题，使整个事情看起来波涛汹涌，尽管事实并非如此.我猜 iPad Safari 正在尝试做一些事情来节省内存.有什么办法可以防止这种波动的发生吗?

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 a way in which I can prevent this choppy-ness from happening?

此外，iPad Safari 究竟想要做什么?

Additionally, what is iPad Safari actually trying to do?

推荐答案

我之前用的是translate3d.它产生了不想要的结果.基本上，它会切断并且不渲染屏幕外的元素，直到我与它们交互.因此，基本上，在横向方向上，我的屏幕外网站的一半没有被显示.这是一个 iPad 网络应用程序，因此我正在修复中.

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 application, owing to which I was in a fix.

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

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.

完整的解决方案:

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

现在，虽然这可能不是最高效"的.解决方案，它是唯一有效的解决方案.使用 -webkit-overflow-scrolling: touch 时，Mobile Safari 不会呈现屏幕外的元素，或者有时呈现不规则的元素.除非将 translate3d 应用于所有其他可能因该滚动而离开屏幕的元素，否则这些元素将在滚动后被切掉.

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.

_{(这是我问题的完整答案.我最初标记了 Colin Williams 的答案 作为正确答案，因为它帮助我找到了完整的解决方案.社区成员 @Slipp D. Thompson在我问了大约 2.5 年后，编辑了我的问题，并告诉我我在滥用 SO 的问答格式.他还告诉我单独发布这个作为答案.@科林威廉姆斯，谢谢！您链接到的答案和文章给了我一个尝试使用 CSS 的线索.所以，再次感谢，希望这能帮助其他一些迷失的灵魂.这肯定帮了我很大的忙！)}

_{(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. @Colin Williams, thank you! The answer and the article you linked out to gave me a lead to try something with CSS. So, thanks again, and hope this helps some other lost soul. This surely helped me big time!)}

这篇关于iPad Safari 滚动会导致 HTML 元素消失并延迟重新出现的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！