iOS6 CSS3 3D轉換速度非常慢

編輯：這個問題將在兩天內允許我這樣做時獲得500點聲望的獎勵。如果在此期間得到答覆，則第一個發佈的修復程序的作者將盡快獲得聲望。iOS6 CSS3 3D轉換速度非常慢

與iOS5.1相比，iOS6似乎打破了CSS3轉換的性能，非常糟糕。如果您可以提供一個修復程序，將iOS6上的以下示例的性能提高到與iOS5.1相當的水平，而不失一般性，您可以獲得一大堆我辛苦獲得的聲譽。該示例在iOS5.1上運行得非常好（在iPhone 4和4S上）。 iOS Chrome應用程序是運行此測試的好地方，因爲它嵌入了UIWebView。

現在看來，這些元素似乎正在硬件加速，但蘋果的低層管道存在一個殺死性能的bug。我已經嘗試了一些硬件加速的解決方法，並且似乎在iOS5.1上調用GPU的任何內容都會導致iOS6上的大幅減速。

即使修改動畫功能，該錯誤仍然存在，如下所示。

function animate(node) { 
    node.style.webkitAnimation = 'sample 5s infinite'; 
    node.style.webkitPerspective = 1000; 
    node.style.webkitBackfaceVisibility = 'hidden'; 
}

請幫助我打擊iOS6的暴政，並釋放我現在非常糟糕的應用程序。

<!DOCTYPE html> 
<html> 
    <head> 
     <title>Animation Playground</title> 
     <style> 
      @-webkit-keyframes sample { 
       0% { -webkit-transform: translate3d(0px, 0px, 0px); } 
       10% { -webkit-transform: translate3d(0px, 0px, 0px); } 
       20% { -webkit-transform: translate3d(10px, 0px, 0px); } 
       40% { -webkit-transform: translate3d(10px, 10px, 0px); } 
       50% { -webkit-transform: translate3d(10px, 20px, 0px); } 
       80% { -webkit-transform: translate3d(20px, 20px, 0px); } 
       100% { -webkit-transform: translate3d(0px, 0px, 0px); } 
      } 
     </style> 
     <script type="text/javascript"> 
      function fib(node, a, b) { 
       node.innerHTML = a; 
       setTimeout(function() { 
        fib(node, a + b, b); 
       }, 0); 
      } 

      function animate(node) { 
       node.style.webkitAnimation = 'sample 5s infinite'; 
      } 

      function createNode(row, column) { 
       var node = document.createElement('div'); 
       node.style.width = '7px'; 
       node.style.height = '7px'; 
       node.style.position = 'absolute'; 
       node.style.top = 30 + (row * 9) + 'px'; 
       node.style.left = (column * 9) + 'px'; 
       node.style.background = 'green'; 
       return node; 
      } 

      function run() { 
       for (var row = 0; row < 20; ++row) { 
        for (var column = 0; column < 20; ++column) { 
         var node = createNode(row, column); 
         document.body.appendChild(node); 
         animate(node); 
        } 
       } 

       var output = document.getElementById('output'); 
       fib(output, 0, 1); 
      } 
     </script> 
    </head> 
    <body onload="run()"> 
     <div id="output" style="font-size: 40px; position: absolute; left: 220px;"></div> 
    </body> 
</html>

來源

2012-09-24 eplawless

http://cssdeck.com/labs/full/bchlgewv/0我沒有看到iOS 5.1和6之間的任何區別。 – mddw

並排留下兩個設備並觀看櫃檯; iOS 5.1輕而易舉地超過iOS 6. – eplawless

當發出translate3d魔法調用時，iOS6不再自動加速內容。一些懇求者建議requestAnimationFrame將調用必要的代理並安撫iOS的強大和不可知的惡魔 - 可能在犧牲一隻小山羊之後（它必須沒有缺陷）。其他人則建議增加一種內聯風格以獲得透視和背面可見性。

來源

2012-09-25 04:27:10

LOL！ PITA可能不會批准。 – justspamjustin

iOS 6需要一組不同的CSS規則來觸發硬件加速。

試試這個：

-webkit-transform: translate(0,0) translateZ(0);

編輯： 其實我已經發現translate3d()仍然有效，提供的值的變化作爲過渡的一部分。所以，這確實不工作：

.element.position {-webkit-transition: left 1s ease; 
        -webkit-transform: translate3d(0,0,0)}  
.element.position-a {left: 0} 
.element.position-b {left:500px}

但這DOES工作：

.element.position {-webkit-transition: all 1s ease}  
.element.position-a {-webkit-transform: translate3d(0,0,0)} 
.element.position-b {-webkit-transform: translate3d(500px,0,0)}

來源

2012-09-26 15:30:36 thv20

切勿混用左/頂的定位與翻譯（）或translate3d（） - 這將是可怕的慢即使在臺式電腦上也可能導致放緩

來源

2012-10-04 07:28:56 olsn

iOS6 CSS3 3D轉換速度非常慢

回答

相關問題