3

我遇到了背景图像无法在 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）中引起重大问题。
4

2 回答 2

0

你有没有尝试过？

#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); 
}
于 2013-06-09T13:11:07.550 回答
0

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

这个网站给了我尝试加速页面上其他项目的想法，它奏效了！

于 2013-06-09T21:32:30.647 回答