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

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

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

然而，元素 没有出现直到我把手指从屏幕上抬起，滚动条完成了所有的动画。

这给我造成了一个非常明显的问题，使整个事情看起来波涛汹涌，虽然它不是。我猜 iPad Safari 正在尝试做一些节省内存的事情。有没有什么办法可以阻止这种情况的发生？

此外，iPad Safari 到底想做什么？

108321 次浏览
小开

你需要欺骗浏览器来更有效地使用硬件加速。你可以通过一个空的三维变换来实现:

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

特别是在具有 position:relative;声明的子元素上需要这样做(或者，全力以赴对所有子元素都这样做)。

这不是一个保证修复，但它是相当成功的大多数时间。

帽子贴士: IOS 5原生滚动-微笑 & Gotchas

小开

我在 iOS7上也遇到了同样的问题，iOS4.2.5中的滚动条元素就这样消失了。

我试着按照这里的建议添加 translate3d(0,0,0)。它已经解决了这个问题，但是它禁用了“弹出”效果。

解决方案是将 "position:relative; z-index:1000;display:block" CSS 属性赋予包含捲动元素的整个容器，而不需要将 翻译3D赋予子元素。

小开
最佳答案

我之前用的是 翻译3D。它产生了意想不到的结果。基本上，它会删除屏幕外的 而不是渲染元素，直到我与它们交互。所以，基本上，在横向方向，我的网站有一半是在屏幕外显示不出来的。这是一个 iPad 网络应用程序，由于我在一个修复。

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

完整的解决方案:

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

现在，尽管这可能不是最“有效”的解决方案，但它是唯一有效的方案。当使用 -webkit-overflow-scrolling: touch时，MobileSafari 不会呈现屏幕外的元素，有时也不会呈现不规则的元素。除非一个 翻译3D被应用到所有其他因为滚动而可能离开屏幕的元素上，否则这些元素在滚动之后将被截断。

(这是对我问题的完整回答。我最初将 Colin Williams 的回答标记为正确答案，因为它帮助我得到了完整的解决方案。一个社区成员@Slipp D. Thompson 编辑了我的问题，在我问了大约2.5年之后，他告诉我我滥用了 SO 的问答模式。他还让我把这个单独贴出来作为答案。 @ 科林 · 威廉姆斯，谢谢！这个答案和你链接到的文章给了我一个尝试使用 CSS 的线索。再次感谢，希望这能帮助其他迷失的灵魂。这确实帮了我大忙!)

小开

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

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

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

小开

我很确定我刚刚解决了这个问题:

overflow-y: auto;

(根据您的需要，大概只有 overflow: auto;也可以工作。)

小开

瞄准除 Html: *:not(html)之外的所有目标 它修改了堆栈上下文，导致一些 z 索引中断。

我们应该更好地尝试 瞄准正确的目标和应用 -webkit-transform: translate3d(0,0,0)到它只。

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

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


/* iOS redraw fix */
animation: redraw 1s linear infinite;
小开

在某些情况下，应用了 轮换和/或使用了 Z 索引。

旋转 : 现有的声明 -webkit-transform来旋转一个元素可能不足以解决外观问题(如 -webkit-transform: rotate(-45deg))。在这种情况下，您可以使用 -webkit-transform: translateZ(0px) rotateZ(-45deg)作为一个技巧(注意旋转 Z )。

Z index : 与旋转一起，您可以定义一个正的 z-index属性，如 z-index: 42。在我的例子中，“旋转”下描述的上述步骤足以解决这个问题，即使使用空的 translateZ(0px)。我怀疑，虽然 Z 索引在这种情况下可能有 造成的的消失和重新出现在第一位。在任何情况下，都需要保留 z-index: 42属性——仅有 -webkit-transform: translateZ(42px)是不够的。

小开

这是开发人员面临的一个非常普遍的问题，主要是由于没有重新创建定义为 position : fixed的元素的 野生动物园属性造成的。

所以要么改变位置属性，要么像其他答案中提到的那样应用一些技巧。

IOS 上位置固定和滚动的问题

滚动时切换到 iOS Safari 上固定的位置

小开

在我的例子中(一个 iOSPhoneGap应用程序) ，将 翻译3D应用于相关的子元素并没有解决这个问题。我的可滚动元素没有设置高度，因为它是绝对定位的，我定义了顶部和底部的位置。

添加一个 最小身高(100像素)为我修复了它。

小开

当 翻译3D不工作时，试着加入 观点。它总是为我工作

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

使用硬件加速的 CSS 提高网站的性能

小开

我在使用旧版本的 Fancybox 时也遇到了同样的问题。

升级到 v3将解决您的问题 或者，您只需添加:

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

当时 translate3d可能不工作。在这些情况下，perspective可以使用

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

我在 框架7和 Cordova 项目中遇到了这个问题。我尝试了以上所有的解决方案。他们没有解决我的问题。

在我的例子中，我在同一个页面上使用了10多个 CSS 动画，并进行了无限旋转(转换)。我不得不删除动画。现在没有一些视觉特征也没关系。

如果其他答案中的解决方案对您没有帮助，您可以开始消除一些动画。

小开

-webkit-transform: translate3d(0, 0, 0);的技巧对我不起作用。在我的例子中，我让家长:

/* Parent */
height: 100vh;

改成

height: auto;
min-height: 100vh;

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

小开

在我的案例中，CSS 并没有解决这个问题，我在使用 jQuery 重新渲染按钮时注意到了这个问题。

$("#myButton").html("text")

试试这个:

$("#myButton").html("<span>text</span>")

提交答案