-webkit-transform 阻止页面加载

Posted 2023-02-23

【中文标题】-webkit-transform 阻止页面加载

【英文标题】：-webkit-transform Prevents Page From Loading

【发布时间】：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）出现重大问题。

【参考方案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 给了我尝试加速页面上其他项目的想法，它奏效了！