-webkit-transform 阻止页面加载答案

【问题标题】：-webkit-transform Prevents Page From Loading-webkit-transform 阻止页面加载
【发布时间】：2013-06-07 23:18:47
【问题描述】：

我遇到了Background Image not rendering correctly on the iPad 的问题。提供的确实解决了问题的答案是将-webkit-transform: translateZ(0); 添加到解决了问题但导致另一个问题的id。在一个页面（这是一个非常长的页面）上，内容在页面中途停止加载。如果我删除-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）出现重大问题。

【问题讨论】：

标签： ios css safari webkit webkit-transform

【解决方案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); 
}

【讨论】：

-webkit-transform: translate(0, 0); 确实可以防止奇怪的加载问题。 -webkit-transform: translate3D(0, 0, 0); 完全停止加载长页面。然而-webkit-transform: translate(0, 0); 似乎并没有解决我最初从我的original question. 遇到的问题

【解决方案2】：

为了解决这个渲染问题，我必须在页面上包装内容的其他元素上触发硬件加速。在这个网站的情况下是#main-content 和#footer。

This site 给了我尝试加速页面上其他项目的想法，它奏效了！

【讨论】：