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

问题描述

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

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.

我的意思是，如果我有一行图片（或者甚至一个渐变的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, what I'm seeing is that the element does not appear until I lift my finger off the screen and the scroller finishes all its animations.

这是造成一个超级明显的问题，使我的整个东西看起来很乱，虽然不是。我猜iPad Safari试图做一些事情来节省内存。有什么办法，我可以防止这种突然发生。此外，如果任何人可以了解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 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.

推荐答案

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

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:

@克林威廉姆斯，谢谢！
你的答案和你链接的文章给了我一个领导使用CSS尝试一些东西。

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

所以，我使用translate3d之前。它产生不必要的结果。基本上，它会切断和不RENDER元素的屏幕，直到我与他们互动。所以，基本上，在横向，我的网站的一半是屏幕外没有被显示。这是一个iPad网络应用程序，由于这是一个修复。

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应用到相对定位的元素解决了这些元素的问题，但其他元素停止渲染，一次离屏。

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.

因此，再次感谢，并希望帮助一些其他失去的灵魂。这肯定帮助我大时！

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

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