14

iOS6 UIWebViewコンポーネントのスクロールパフォーマンスが低いという問題があります。ただし、iOS5ではスクロールは非常にスムーズでした。だから私はウェブを少し検索してこれを見つけました（iOS6ベータ変更ログの一部）。

WebKitは、-webkit-transform：preserve-3dオプションを使用して、要素のハードウェアアクセラレーションレイヤーを常に作成することはなくなりました。作成者は、ハードウェアアクセラレーションを取得する方法として、このオプションの使用を停止する必要があります。

私のアプリが表示するhtmlサイトは多くのcss3変換を使用しているので、それが理由である可能性があります。Webビューを強制的に高速レンダリングモデルに戻す方法について誰かに解決策やアドバイスがありますか？

4

8 に答える 8

8

ハードウェア アクセラレーションをトリガーしている (またはトリガーしていない) CSS プロパティの既に述べた変更に加えて、iOS5 ではあまり持続しない iOS6 の別の変更に気付きました (または、少なくとも以前は気付かなかった) :ハードウェア アクセラレーション要素と非アクセラレーション要素は、レンダリングとアプリの速度を大幅に低下させます。

加速された要素と加速されていない要素の間にオーバーラップがある場合は、他の要素がアニメーション化されていない場合でも、それらの要素にハードウェア アクセラレーションを追加するようにしてください。ケースは加速効果を元に戻します。

確認したい場合は、これに関する短い記事も書いています。 http://indiegamr.com/ios6-html-hardware-acceleration-changes-and-how-to-fix-them/

于 2012-09-30T13:58:28.103 に答える
5

3D 変換 (例) を使用する場合、UIWebView は引き続きハードウェア アクセラレーションを行います-webkit-transform: translateZ(0)。のみを使用すると、もはや機能しません-webkit-transform-style: preserve-3d。

3D 変換を行っているが、iOS 6 で遅くなった例がある場合は、Apple の Bug Reporterで報告する必要があります。

于 2012-09-22T02:41:16.247 に答える
3

iOS6でこのバグを再現し、iOS5.1（iPhone 4と4Sの両方）で完全に動作する簡単なテストケースを添付しました。iOS Chromeアプリは、UIWebViewを組み込んでいるため、このテストを実行するのに適した場所です。PhoneGap 2.0UIWebView内でこのサンプルスクリプトを実行している2台のiPhone4（1つはiOS 5.1を実行し、もう1つはiOS 6を実行）をアップロードしたら添付するビデオがあります。

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

私たちが構築しているアプリは、これが適切に機能することにかなり大きく依存しているため、修正を見つけたいと思います。この例で誰かがエラーを指摘できれば、それも非常にありがたいです。

編集：次のようにアニメーション機能を変更しても、バグは解決しません。

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

これは、GPUを呼び出すとこの速度が低下することを強調しているようです。

編集2：http://bvgam.es/apple/でホストされている追加の例があります。これは、iOS 5.1でスムーズに実行され、iOS 6で1〜2FPSを取得します。

<!DOCTYPE html>
<html>
    <head>
        <title>Animation Playground</title>
        <style>
            @-webkit-keyframes sample {
                0% { -webkit-transform: translate3d(0px, 0px, 0px); opacity: 1; }
                10% { -webkit-transform: translate3d(0px, 0px, 0px); opacity: 0; }
                20% { -webkit-transform: translate3d(10px, 0px, 0px); opacity: 1; }
                40% { -webkit-transform: translate3d(10px, 10px, 0px); opacity: 0; }
                50% { -webkit-transform: translate3d(10px, 20px, 0px); opacity: 1; }
                80% { -webkit-transform: translate3d(20px, 20px, 0px); opacity: 0; }
                100% { -webkit-transform: translate3d(0px, 0px, 0px); opacity: 1; }
            }
        </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-24T19:48:27.757 に答える
2

のすべてのインスタンスを置き換えてみてください-webkit-transform: translate3d(0,0,0);

と

-webkit-transform: translate3d(0,0,0) scale3d(1,1,1);

それは私のために働いた

于 2012-10-15T11:27:59.133 に答える
1

CSS Transforms は、少なくとも iPhone 4 上の私のアプリケーションでは、iOS 6 では確かにかなり遅くなります。

translate3d() の代わりに基本的な translate() を要素に設定しましたが、パフォーマンスは同じままだったので、translate3d() でさえ GPU アクセラレーションをトリガーしなくなったと思います。それはバグのように聞こえます。

回避策として、要素に別の CSS プロパティ (rotate3d()、scale3d()、perspective など) を設定しようとしましたが、どちらもハードウェア アクセラレーションをトリガーしていないようです。

于 2012-09-22T15:48:45.397 に答える
0

ちなみに、-webkit-transform-originは、translateZ（0）などのハードウェアアクセラレーション変換と一緒に使用すると、以前はハードウェアアクセラレーションでしたが、現在はそうではありません。

于 2012-09-26T18:01:36.273 に答える
0

-webkit-transform: translate3d(0,0,0);のすべてのインスタンスをに置き換えてみてください-webkit-perspective: 1000; -webkit-backface-visibility: hidden;。これは私のために働いた。-webkit-transform: translate3d(0,0,0);ハードウェアアクセラレーションを呼び出さなくなったようです。

于 2012-09-24T12:38:28.253 に答える
0

-webkit-transform: translate3d(0,0,0); と報告している人はいますか? iOS 6 では速度が遅いため、これを示すサンプル コンテンツへの URL を提供してください。

于 2012-09-24T17:55:43.517 に答える