我目前正在使用html5和jQuery for iPad Safari开发一个网络应用程序。我遇到了一个问题，当我向下滚动它们时，大的滚动区域导致屏幕外的元素在延迟之后出现。
我的意思是，如果我有一排图像（或者甚至是带有渐变的div）在屏幕外，当我向下（或向上）向下滚动时，预期的行为当我滚动到它时，元素出现在屏幕上。
然而，我所看到的是，元素不会出现，直到我将手指从屏幕上抬起并且滚动条完成所有动画。
这对我来说引起了一个非常明显的问题，使整个事情看起来不稳定，尽管事实并非如此。我猜测iPad Safari正在尝试做一些事情以节省内存。有什么办法可以防止这种不稳定的发生。此外，如果有人能够了解iPad Safari实际上正在尝试做什么，我也将不胜感激。
答案 0 :(得分：174)
您需要欺骗浏览器以更有效地使用硬件加速。您可以使用空的3d变换执行此操作：
-webkit-transform: translate3d(0,0,0)
特别是，你需要在具有position:relative;声明的子元素上使用它（或者，只需全力以赴地对所有子元素执行）。
不是一个有保障的修复，但大部分时间都相当成功。
答案 1 :(得分：63)
这是我的问题的完整答案。我最初将@Colin Williams的回答标记为正确的答案，因为它帮助我找到了完整的解决方案。社区成员@Slipp D. Thompson在我问了大约2。5年之后编辑了我的问题，然后告诉我，我正在滥用SO的Q＆amp;格式。他还告诉我要另外发布这个答案。所以这是解决我问题的完整答案：
@Colin Williams，谢谢！ 你的回答和你链接的文章让我领导尝试使用CSS。所以，我之前使用的是translate3d。它产生了不必要的结果基本上，它会切断屏幕外的RENDER元素，直到我与它们交互。所以，基本上，在横向方向，我的网站的一半是在屏幕外没有显示。这是一个iPad网络应用程序，因为我正在修复。
将translate3d应用于相对定位的元素解决了这些元素的问题，但其他元素在屏幕外停止渲染。除非我重新加载页面，否则我无法与之交互的元素（图稿）将永远不会再渲染。
完整的解决方案：
*:not(html) {
-webkit-transform: translate3d(0, 0, 0);
}
现在，虽然这可能不是最“有效”的解决方案，但它是唯一有效的解决方案。使用-webkit-overflow-scrolling: touch时，Mobile Safari不会渲染屏幕外的元素，有时也会呈现不规则的元素。除非将translate3d应用于因滚动而可能在屏幕外的所有其他元素，否则这些元素将在滚动后被切断。
所以，再次感谢，并希望这有助于其他一些失去的灵魂。这肯定帮了我很大的时间！
答案 2 :(得分：12)
定位除html之外的所有元素：*:not(html)
在我的案例中引起了其他元素的问题。它修改了堆叠上下文，导致某些z-index中断。
我们最好尝试定位正确的元素并仅将-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;
答案 3 :(得分：6)
当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
答案 4 :(得分：2)
静态地将-webkit-transform: translate3d(0,0,0)添加到元素并不适合我。
我动态应用此属性。例如，当滚动页面时，我在元素上设置-webkit-transform: translate3d(0,0,0)。然后在短暂的延迟后，我重置了这个属性，即-webkit-transform: none
这种方法似乎有效。
谢谢@Colin Williams指出我正确的方向。
答案 5 :(得分：1)
我在ios7上遇到了与iscroll 4.2.5相同的问题。整个滚动元素就消失了。
我试图按照此处的建议添加translate3d(0,0,0)，它已解决了问题，但它禁用了iscroll“snap”效果。
解决方案是将"position:relative; z-index:1000;display:block" css属性赋予包含scroll元素的整个容器，并且不需要将translate3d提供给子元素。
答案 6 :(得分：0)
我非常确定我刚刚解决了这个问题：
overflow-y: auto;
（根据您的需要，大概只有overflow: auto;也可以。）
答案 7 :(得分：0)
有些情况下会应用轮播和/或使用 Z索引。
轮播：轮换元素的现有-webkit-transform声明可能不足以解决外观问题（如-webkit-transform: rotate(-45deg)）。在这种情况下，您可以使用-webkit-transform: translateZ(0px) rotateZ(-45deg)作为技巧（介意旋转 Z ）。
Z索引：与轮换一起，您可以定义一个肯定的z-index属性，例如z-index: 42。上面的步骤描述在＆＃34;旋转＆＃34;在我的情况下足以解决问题，即使是空translateZ(0px)。我怀疑在这种情况下Z索引可能会导致导致消失并重新出现。无论如何，z-index: 42属性需要保留 - -webkit-transform: translateZ(42px)仅仅是不够。
答案 8 :(得分：0)
这是开发人员面临的一个非常常见的问题，主要是由于#include <iostream>
#include <string>
class Base
{
public:
std::string baseName;
Base(const std::string& bn):
baseName(bn) {}
virtual void doIt()
{
std::cout << baseName;
}
};
class Derived : public Base
{
public:
std::string dName;
Derived(const std::string& bn, const std::string& dn):
Base(bn), dName(dn) {}
void doIt() override
{
Base::doIt();
std::cout << " " << dName;
}
};
class Derived1 : public Derived
{
public:
int x = 10;
Derived1(const std::string& bn, const std::string& dn):
Derived(bn, "Dervied1"+dn) {}
int getX(void) const { return x; }
void doIt() override
{
Derived::doIt();
std::cout << " " << getX();
std::cout << std::endl;
}
};
class Derived2 : public Derived
{
public:
int y = 20;
Derived2(const std::string& bn, const std::string& dn):
Derived(bn, "Derived2"+dn) {}
int getY(void) const { return y; }
void doIt() override
{
Derived::doIt();
std::cout << " " << getY();
}
};
void func(Base& b)
{
b.doIt();
}
int main(void)
{
Derived1 d1("Base", "foo");
func(d1);
Derived2 d2("Base", "foo");
func(d2);
}
属性没有重新创建定义为Safari's的元素。
所以要么改变位置属性，要么应该像其他答案中提到的那样应用一些黑客。
答案 9 :(得分：0)
在我的情况下（iOS Phonegap应用），将translate3d应用于相关子元素并不能解决问题。我的可滚动元素没有设置高度，因为它是绝对定位的，我正在定义顶部和底部位置。为我修复的是添加最小高度（100px）。
答案 10 :(得分：0)
我使用较旧版本的Fancybox时遇到了同样的问题。 升级到v3将解决您的问题，或者您只需添加：
{{1}}
答案 11 :(得分：0)
在时间translate3d可能不起作用的情况下，可以使用perspective
transform: translate3d(0, 0, 0);
-webkit-transform: translate3d(0, 0, 0);
perspective: 1000;
-webkit-perspective: 1000;
答案 12 :(得分：0)
我在Framework7＆Cordova项目中遇到了这个问题。我尝试了以上所有解决方案。他们没有解决我的问题。
就我而言，我在同一页面上使用了十多个css动画，并且进行了无限旋转（变换）。我必须删除动画。现在可以了，因为缺少一些视觉功能。
如果上述解决方案对您没有帮助，则可以开始删除一些动画。
答案 13 :(得分：0)
-webkit-transform: translate3d(0, 0, 0);技巧对我不起作用。就我而言，我已将父母设为：
// parent
height: 100vh;
更改为：
height: auto;
min-height: 100vh;
解决了其他人面临相同情况的问题。
答案 14 :(得分：0)
就我而言，CSS无法解决此问题。我在使用jQuery重新呈现按钮时注意到了问题。
$("#myButton").html("text")
尝试
$("#myButton").html("<span>text</span>")