2

編集:この質問には、許可された 2 日間で、評判 500 の報奨金が与えられます。それまでに回答があれば、最初に投稿された修正の作成者にできるだけ早く評判が与えられます。

iOS5.1 と比較して、iOS6 では CSS3 変換のパフォーマンスが大幅に低下しているようです。一般性を失うことなく、iOS6 での次の例のパフォーマンスを iOS5.1 と同等に戻す修正を提供できれば、私の苦労して得た評判を得ることができます。この例は、iOS5.1 (iPhone 4 と 4S の両方) で問題なく動作します。iOS Chrome アプリには UIWebView が埋め込まれているため、このテストを実行するのに適しています。

現在、これらの要素はハードウェア アクセラレーションされているようですが、Apple の低レベル パイプラインにバグがあり、パフォーマンスが低下しているようです。ハードウェア アクセラレーションのいくつかの回避策を試しましたが、iOS5.1 で GPU を呼び出すと、iOS6 で大幅な速度低下が発生するようです。

animate 関数を次のように変更しても、バグは解決しません。

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>
4

3 に答える 3

2

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}

しかし、これは機能します：

.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-26T15:30:36.993 に答える
2

translate3d マジックの呼び出しが発声されたときに、iOS6 がコンテンツを自動的に GPU 高速化することはなくなりました。一部のサプリカントは、requestAnimationFrame が必要な仲介者を呼び出し、iOS の強力で認識できない悪魔をなだめるだろうと示唆しています。他の人は、遠近感と背面の可視性のためにインライン スタイルを追加することを提案しています。

于 2012-09-25T04:27:10.777 に答える
0

左/上の配置を translate() または translate3d() と決して混在させないでください。これは、デスクトップ コンピューターでも恐ろしく遅くなり、速度が低下する可能性があります。

于 2012-10-04T07:28:56.220 に答える