Question

我遇到Background Image not rendering correctly on the iPad的问题。提供解决问题的答案是将-webkit-transform: translateZ(0);添加到解决问题但导致另一个问题的id。在一个页面（这是一个非常长的页面）上，内容在页面中途停止加载。如果我删除-webkit-transform: translateZ(0);，问题就会停止（后台问题也会重新出现）。为什么-webkit-transform: translateZ(0);阻止加载页面？

CSS with webkit-transform：

#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）。

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); 
}

Answer 2

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

This site让我尝试加速页面上的其他项目并且它有效！

-webkit-transform防止加载页面

2 个答案: