CSS 再レイアウトの再描画により iOS で bug_html/css_WEB-ITnose が発生する

問題

最近、モバイル Web を実行しているときに問題が見つかりました。iOS では、アニメーション要素が左上の値を使用している場合、システムのテキストのコピー機能が WeChat Yixin クライアントで使用できません。長い間苦戦していましたが、後でマスターのリマインドでCSSの再描画が原因であることがわかりました。 CSS3の翻訳に切り替えたらOKになりましたので調べてみたところ、必要な方のために以下のナレッジポイントを掲載しました。参照: https://github.com/AlloyTeam/Mars/blob/master/performance/css-property-animation-performance.md

Reason

CSS アニメーション プロパティは、ページ全体の再配置、レイアウト、再描画、再合成をトリガーします。
ペイントは通常、ペイントをトリガーする CSS アニメーション プロパティの使用を避けるようにしてください。これが、left: 3em を使用する代わりに webkit-transform: translationX(3em) を使用することをお勧めする理由です。レイアウトとペイント、webkit-transform はページ全体のコンポジットのみをトリガーします
div {
-webkit-animation-duration: 5s;
-webkit-animation-name: move;
-webkit-animation-iteration-count : 無限;
-webkit-animation-direction: 代替;
幅: 200 ピクセル;
高さ: 200 ピクセル;
マージン: 100 ピクセル;
背景色: #808080;
位置: 絶対;
}
@-webkit-keyframes move {

from {    left: 100px;}to {    left: 200px;}

}
以下に示すように left を使用すると、赤い枠線で示されるページの再描画が継続的にトリガーされます:

move

@-webkit-keyframes move{

from {    -webkit-transform: translateX(100px);}to {    -webkit-transform: translateX(200px);}

}

以下に示すように -webkit-transform page を使用します 再編成のみオレンジ色の境界線で表示されます:

move2

CSS アニメーションにおける CSS プロパティの動作テーブル

ブラウザが DOM を描画するプロセスは次のとおりです:

获取 DOM 并将其分割为多个层（layer）将每个层独立地绘制进位图（bitmap）中将层作为纹理（texture）上传至 GPU复合（composite）多个层来生成最终的屏幕图像。

left/top/margin などの属性ドキュメント内の要素のレイアウトに影響を与える レイアウトがアニメーション化されると、要素のレイアウトの変更がドキュメント内の他の要素の位置に影響を与える可能性があり、影響を受けるすべての要素が再レイアウト [1] になるため、ブラウザは全体を再描画する必要があります。レイヤを削除して GPU に再アップロードすると、パフォーマンスに大きなオーバーヘッドが発生します。

Transform は複合プロパティです。複合プロパティのトランジション/アニメーション アニメーションは複合レイヤーを作成し、アニメーション化された要素を別のレイヤーでアニメーション化できます。通常、ブラウザはまずレイヤーのコンテンツをビットマップに描画し、それをテクスチャとして GPU にアップロードします。レイヤーのコンテンツが変更されない限り、ブラウザを再描画する必要はありません。再合成による新しいフレーム[2]。

レイヤー作成の条件は次のとおりです:

3D 或透视变换 CSS 属性使用加速视频解码的 <video> 元素拥有 3D (WebGL) 上下文或加速的 2D 上下文的 <canvas> 元素复合插件(如 Flash)进行 opacity/transform 动画的元素拥有加速 CSS filters 的元素元素有一个包含复合层的后代节点(换句话说，就是一个元素拥有一个子元素，该子元素在自己的层里)元素有一个 z-index 较低且包含一个复合层的兄弟元素(换句话说就是该元素在复合层上面渲染)

概要:

对布局属性进行动画，浏览器需要为每一帧进行重绘并上传到 GPU 中对合成属性进行动画，浏览器会为元素创建一个独立的复合层，当元素内容没有发生改变，该层就不会被重绘，浏览器会通过重新复合来创建动画帧

ページ レイアウト、再描画、およびリフローにおけるさまざまな属性の影響を含む http://csstriggers.com/ も参照できます。