-webkit-transform 防止页面加载

Question

我在iPad上遇到了背景图片无法正确渲染的问题。提供的解决方案是在相应的id中添加-webkit-transform: translateZ(0);，这确实解决了这个问题，但也引发了另一个问题。在一个非常长的页面中，内容只加载了一半就停止了。如果我移除-webkit-transform: translateZ(0);，这个问题就消失了（但背景问题也会再次出现）。为什么-webkit-transform: translateZ(0);会阻止页面加载？

带有webkit-transform的CSS：

#wrap {  
  margin:0 auto; 
  position:relative; 
  padding:0; 
  background: #B3B1B2 url(/images/bgs/parchment2.jpg);
  -webkit-transform: translateZ(0); 
}

注意事项：

• 这个问题发生在运行iOS 6.1.3的iPad Mini上。
• 在iPhone 4（相同版本的iOS）或Chrome中，此问题不会出现。
• 这确实会在Safari 5.1中造成严重问题（我正在运行Windows系统）。

- L84

Answer 1

你试过了吗？

#wrap {
    margin:0 auto;
    position:relative;
    padding:0;
    background: #B3B1B2 url(/images/bgs/parchment2.jpg);
    -webkit-transform: translate3D(0, 0, 0); 
}

或者：

#wrap {
    margin:0 auto;
    position:relative;
    padding:0;
    background: #B3B1B2 url(/images/bgs/parchment2.jpg);
    -webkit-transform: translate(0, 0); 
}

- Graham Robertson

---

-webkit-transform: translate(0, 0); 可以防止奇怪的加载问题。 -webkit-transform: translate3D(0, 0, 0); 可以防止长页面完全加载。但是 -webkit-transform: translate(0, 0); 似乎不能解决我在原始问题中遇到的问题。 - L84

Answer 2

为了解决这个渲染问题，我不得不在页面上包裹内容的其他元素上触发硬件加速。在这个网站的情况下，它是#main-content和#footer。 这个网站给了我尝试加速页面上其他项目的想法，而且它起作用了！

- L84