web-dev-qa-db-ja.com

iOS Safariが「-webkit-transform」でメモリ不足になる

http://jsfiddle.net/ES4xG/8/ ほとんどのRetinaデバイスがクラッシュします。

iOS Safariは、いくつかの_-webkit-transform_命令を使用すると、「簡単に」メモリ不足になり、クラッシュします。このアプローチは印象的なグラフィックスを提供しますが、特にRetinaディスプレイでは、大量のメモリを消費してクラッシュを引き起こすようです。

上記のデモは、PCブラウザーで通常は実行される150回表示されるテキストを示しています。

フォントサイズと要素数が誇張されてクラッシュする。 -webkit-transform: translate3d(0,0,0)は、各要素の描画をGPUで高速化することを目的としています。

実際のアプリケーションでは、translateX、Y、Z、scaleなど、GPUに接続されているように見える他のアプリケーションも同じように使用しています。画像とスプライトも使用されますが、クラッシュとは直接関連していません。

上記のシナリオの場合：

1）iOS Safariがクラッシュするのはバグですか？

2）プラグインApple Instruments Memory Monitor、仮想メモリが上昇し、クラッシュの原因であるようです。このメモリを正確に使用しているのは何ですか？

3）多くのメモリを消費しない他のGPU高速化アプローチはありますか？

ioscssmobile-safariwebglgpu
21
Zero Distraction

あなたの例では、すべてのハードウェアアクセラレーションアイテムの高さが257,025pxであるため、クラッシュします。私のテストでは、モバイルサファリはクラッシュする前に高さ約20,000pxを処理できるようです。

ハードウェアアクセラレーションは素晴らしいですが、すべてに使用して悪用しないでください。

これをデバッグするには、ターミナルから次のキーを使用してMacでSafariを実行する必要があります。

$> export CA_COLOR_OPAQUE=1 
$> export CA_LOG_MEMORY_USAGE=1
$> /Applications/Safari.app/Contents/MacOS/Safari

CA_COLOR_OPAQUEは、加速される要素を示します。CA_LOG_MEMORY_USAGEは、レンダリングに使用されるメモリの量を示します。

詳細については、次のリンクをご覧ください。

29
Andrey

変換する要素の親でこれを使用してみてください

-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
transform-style: preserve-3d;

そしてこれはあなたの変換された要素のより良いパフォーマンスのために

-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
backface-visibility: hidden;
7
Gildas.Tambo