小编典典

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

html

我目前正在使用HTML5和jQuery开发针对iPad
Safari的网络应用。我遇到了一个问题,其中较大的滚动区域会导致在向下滚动时,屏幕上的元素在延迟后出现。

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

但是,我看到的是,直到我将手指从屏幕上移开并且滚动器完成了所有动画后,该元素 才出现

这给我造成了一个非常明显的问题,尽管看起来并非如此,但使整个事情看起来很不稳定。我猜想iPad
Safari正在尝试做一些事情来节省内存。有什么方法可以防止这种不连贯现象的发生。此外,如果有人能阐明iPad Safari的实际用途,我也将不胜感激。


阅读 425

收藏
2020-05-10

共1个答案

小编典典

这是我的问题的完整答案。 我最初将@Colin
Williams的答案标记为正确的答案,因为它帮助我获得了完整的解决方案。在我问了2.5年后,社区成员@Slipp D.
Thompson编辑了我的问题,并告诉我我正在滥用SO的Q&A格式。他还告诉我将其单独发布作为答案。因此,这是解决我的问题的完整答案:

@科林·威廉姆斯,谢谢!您的答案和您链接的文章给了我引导,尝试使用CSS。

因此,我之前使用过translate3d。它产生了不良的结果。基本上,它将剔除屏幕上的元素,并且不进行渲染,直到我与它们进行交互为止。因此,基本上,从横向看,没有显示我的一半不在屏幕上的网站。这是一个iPad
Web应用程序,由于我已修复。

将translate3d应用于相对定位的元素可以解决这些元素的问题,但是一旦离开屏幕,其他元素就会停止渲染。我无法与之交互的元素(图稿)将永远不会再次呈现,除非重新加载页面。

完整的解决方案:

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

现在,尽管这可能不是最“有效”的解决方案,但它是唯一可行的解​​决方案。使用时,Mobile
Safari不会渲染屏幕外的元素,有时甚至无法正常渲染-webkit-overflow-scrolling: touch。除非将translate3d应用于由于该滚动而可能在屏幕外消失的所有其他元素,否则这些元素将在滚动后被切掉。

因此,再次感谢,希望这对其他迷路者有所帮助。这无疑帮助了我很多时间!

2020-05-10