ホームページ > 記事 > ウェブフロントエンド > CSS3 変換が HTML ドキュメント フローに与える影響
CSS3 変換が HTML ドキュメント フローに与える影響
- 高洛峰オリジナル
- 2017-02-09 11:27:331725ブラウズ
htmlはいつも本当に素晴らしいです
「ハードウェアアクセラレーション」から来ています
暇なときにまとめた、年の初めのメモ。
多くのオンライン記事では、ページのレンダリング速度とアニメーションの流暢性を向上させるために、ブラウザーのハードウェア アクセラレーションをオンにすることをお勧めします。これは、実際に役立つかどうかに関係なく、多くの人のページ作成のほぼ標準機能になっています:
html，body {
transform: translate3d(0,0,0);
}
しかし、多くの場合、HTML レベルのドキュメント フローに「異常」を引き起こします。
W3C 仕様には次の説明があります:
HTML 名前空間では、変換に none 以外の値を指定すると、スタッキング コンテキストと包含ブロックの両方が作成されます。
オブジェクトは、固定位置の子孫の包含ブロックとして機能します。 .
の意味:
HTML では、スタックされたオブジェクトとコンテナ ブロックの両方である DOM を変換する transform ほど無意味なものはありません。 transform 变换更没有意义的了。
这类对象也扮演着 positioned(主要是 absolute/fixed ) 子孙元素容器的角色。
。。。翻译能力有限，不理解的人估计这句话看了后更晕，下面详述。
标准文档流
页面中的 dom 元素按照其在 HTML 中的标签位置顺序进行从上到下、从左往右的排布过程
想必大家对这个基础的定义已经很熟悉了吧。但是，这个究竟在实际中有什么体现呢？
如果你在页面中放置一大堆 display: inline-block 的元素，它们会很乖巧的 上 -> 下 左 -> 右 排的很整齐。这就是标准文档流的基础体现。
当你用position、float等属性使其脱离文档流时，就会又产生一个页面 层级 的概念。(扯远了...)
transform 改变定位默认属性
例子代码如下：
<body> <header style="position: fixed; top: 0; width: 100%; background: red;">header</header> <p style="height: 2000px;"></p> <footer style="position: fixed; bottom: 0; width: 100%; background: blue;">footer</footer> </body>
点击查看例子
dom 元素的默认定位属性是 position: static; 这也是标准文档流的标准定位方式。
例子中，不管 p 怎么上下滚动，header 和 footer 会永远置于屏幕的最上和最下部。
但是如最初所述，给 body 或 html 加上一个 transform: translate3d(0,0,0);，你再去试，就会发现，原本 position: fixed; 的两个元素都不听话了，会随着屏幕进行滚动。
实际上，position: fixed; 的参考对象并不是大家所说的屏幕，而是一个 viewport 的html对象，一般地一个页面(document.documentElement)会生成一个 viewport。
你用 document.documentElement.clientHeight 就可以的看到实际 viewport 的高度，其中 fixed 的元素都是以此为容器进行定位的。
body(或html) 加了 transform 属性以后，整个 body DOM 既会产生相应的变换，但此时的“整个”仅是指 body 下标准文档流元素，对于那些 position: absolute; / position: fixed; 元素，因为已经脱离了 body 所属的文档流，所以无法凭借 body 的变换使自己也自然的达到相应的变换效果。
此时，浏览器为了让此类 DOM 得到相应的变化，会产生一个新的 viewport，这个 viewport 作为定位元素的容器存在，会响应 body 的 transform 变换效果，从而让里面那些脱离文档流的 positioned 元素也能进行变换。
这个 viewport 会严重影响 position: fixed; 的定位，当它随着“本尊”dom同步滚动的时候，会带着 fixed 元素一块滚，此时会产生一种类似 absolute 的诡异效果：
fixed 元素似乎变成了 absolute，存在于一个和document.documentElement大小一致的“看不见”容器内。
引申情况
在一些移动端设备(或APP)上，给 <video> 标签的播放默认开启的硬解码，此时也会产生上述现象，视频会"浮"在页面上面，不会随页面元素正常滚动。
还有一些低版本移动端浏览器上，也会出现类似的情况，可按此思路尝试解决。
总结
其实上面的情况不只会发生在 body 上，一个任意的 dom 添加了 transformこのタイプのオブジェクトは、位置指定 (主に絶対/固定) 子孫要素コンテナーの役割も果たします。
。 。 。私の翻訳能力には限界があるので、理解できない人はこの文を読んでさらに混乱するかもしれません。詳細は以下のとおりです。ページ内の dom 要素は、HTML のタグ位置の順序に従って上から下、左から右に配置されますこれは誰もがよく知っていると思います基本的な定義はすでによく知られています。しかし、これはどのように実践に移されるのでしょうか?
標準的なドキュメント フロー
ページに多数の
display: inline-block要素を配置すると、top->bottomleft->rightきれいに整理されています。これは、標準ドキュメント フローの基本的な実施形態です。
position や float などの属性を使用してドキュメント フローから分離すると、ページ level という別の概念が作成されます。 (遠すぎます...)transform はデフォルトの位置属性を変更しますコード例は次のとおりです:
html，body {
transform: translate3d(0,0,0);
}クリックして例を表示します🎜🎜 dom 要素のデフォルトの位置属性は position: static です; これも標準です ドキュメント ストリームを配置する標準的な方法です。 🎜🎜この例では、p がどのように上下にスクロールしても、ヘッダーとフッターは常に画面の上部と下部に配置されます。 🎜🎜しかし、最初に述べたように、transform:translate3d(0,0,0); を body または html に追加すると、次のようにすることができます。試してみると、もともと position:fixed; の 2 つの要素が従属せず、画面とともにスクロールすることがわかります。 🎜🎜実際、position:fixed; の参照オブジェクトは、一般にスクリーンと呼ばれるものではなく、viewport の HTML オブジェクト、通常はページ ( document. documentElement) はビューポートを生成します。 🎜🎜 document.documentElement.clientHeight を使用すると、実際のビューポートの高さを確認できます。fixed 要素は、これをコンテナとして使用して配置されます。 🎜🎜 transform 属性を body (または HTML) に追加すると、body DOM 全体が対応する変換を受けますが、現時点での「全体」とは、 body.ドキュメント フロー要素。これらの position:Absolute; / position:fixed; 要素は、本文が属するドキュメント フローから分離されているため、これらの要素は使用できません。身体の変化に依存して自分自身を変化させ、対応する変化効果を自然に達成します。 🎜🎜現時点では、このタイプの DOM に対応する変更を加えるために、ブラウザーは新しいビューポートを生成し、要素を配置するためのコンテナーとして存在し、transform 変換エフェクトに応答します。これにより、ドキュメント フローの外にある positioned 要素も変換できるようになります。 🎜🎜このビューポートは、position:fixed; の位置に重大な影響を及ぼします。「self」dom と同期してスクロールすると、fixed 要素とともに回転します。 absolute に似た奇妙な効果を生成します: 🎜🎜fixed 要素は absolute になり、document .documentElement に存在するようです。コード>同じサイズの「目に見えない」コンテナ内。 🎜🎜状況の拡大🎜🎜一部のモバイルデバイス（またはアプリ）では、ハードデコードによる<video>タグの再生がデフォルトで有効になっており、このとき上記の現象も発生します。ビデオは「フローティング」します。「ページ上では、ページ要素とともに正常にスクロールしません。 🎜🎜同様の状況は、一部の低バージョンのモバイル ブラウザでも発生します。この考え方に従って解決してみてください。 🎜🎜概要🎜🎜 実際、上記の状況は body でのみ発生するわけではありません。transform を追加すると、どの dom でもビューポートのような効果が生成されます。行ってみることができます。 🎜🎜🎜引用:🎜http://www.php.cn/🎜🎜🎜🎜🎜🎜html いつも本当に素晴らしいです🎜🎜🎜は「ハードウェアアクセラレーション」から来ています🎜🎜🎜🎜今年の初めにまとめたメモ私の暇な時で 。 🎜 多くのオンライン記事では、ページのレンダリング速度とアニメーションの流暢さを向上させるために、ブラウザーのハードウェア アクセラレーションをオンにすることをお勧めします。これは、実際に役立つかどうかに関係なく、多くの人のページ作成の標準機能になっています:
html，body {
transform: translate3d(0,0,0);
}
しかし、多くの場合、HTML レベルのドキュメント フローに「異常」を引き起こします。
W3C 仕様には次の説明があります:
HTML 名前空間では、変換に none 以外の値を指定すると、スタッキング コンテキストと包含ブロックの両方が作成されます。
オブジェクトは、固定位置の子孫の包含ブロックとして機能します。 .
の意味:
HTML では、スタックされたオブジェクトとコンテナ ブロックの両方である DOM を変換する transform ほど無意味なものはありません。 transform 变换更没有意义的了。
这类对象也扮演着 positioned(主要是 absolute/fixed ) 子孙元素容器的角色。
。。。翻译能力有限，不理解的人估计这句话看了后更晕，下面详述。
标准文档流
页面中的 dom 元素按照其在 HTML 中的标签位置顺序进行从上到下、从左往右的排布过程
想必大家对这个基础的定义已经很熟悉了吧。但是，这个究竟在实际中有什么体现呢？
如果你在页面中放置一大堆 display: inline-block 的元素，它们会很乖巧的 上 -> 下 左 -> 右 排的很整齐。这就是标准文档流的基础体现。
当你用position、float等属性使其脱离文档流时，就会又产生一个页面 层级 的概念。(扯远了...)
transform 改变定位默认属性
例子代码如下：
<body>
<header style="position: fixed; top: 0; width: 100%; background: red;">header</header>
<p style="height: 2000px;"></p>
<footer style="position: fixed; bottom: 0; width: 100%; background: blue;">footer</footer>
</body>
点击查看例子
dom 元素的默认定位属性是 position: static; 这也是标准文档流的标准定位方式。
例子中，不管 p 怎么上下滚动，header 和 footer 会永远置于屏幕的最上和最下部。
但是如最初所述，给 body 或 html 加上一个 transform: translate3d(0,0,0);，你再去试，就会发现，原本 position: fixed; 的两个元素都不听话了，会随着屏幕进行滚动。
实际上，position: fixed; 的参考对象并不是大家所说的屏幕，而是一个 viewport 的html对象，一般地一个页面(document.documentElement)会生成一个 viewport。
你用 document.documentElement.clientHeight 就可以的看到实际 viewport 的高度，其中 fixed 的元素都是以此为容器进行定位的。
body(或html) 加了 transform 属性以后，整个 body DOM 既会产生相应的变换，但此时的“整个”仅是指 body 下标准文档流元素，对于那些 position: absolute; / position: fixed; 元素，因为已经脱离了 body 所属的文档流，所以无法凭借 body 的变换使自己也自然的达到相应的变换效果。
此时，浏览器为了让此类 DOM 得到相应的变化，会产生一个新的 viewport，这个 viewport 作为定位元素的容器存在，会响应 body 的 transform 变换效果，从而让里面那些脱离文档流的 positioned 元素也能进行变换。
这个 viewport 会严重影响 position: fixed; 的定位，当它随着“本尊”dom同步滚动的时候，会带着 fixed 元素一块滚，此时会产生一种类似 absolute 的诡异效果：
fixed 元素似乎变成了 absolute，存在于一个和document.documentElement大小一致的“看不见”容器内。
引申情况
在一些移动端设备(或APP)上，给 <video> 标签的播放默认开启的硬解码，此时也会产生上述现象，视频会"浮"在页面上面，不会随页面元素正常滚动。
还有一些低版本移动端浏览器上，也会出现类似的情况，可按此思路尝试解决。
总结
其实上面的情况不只会发生在 body 上，一个任意的 dom 添加了 transformこのタイプのオブジェクトは、位置指定 (主に絶対/固定) 子孫要素コンテナーの役割も果たします。
。 。 。私の翻訳能力には限界があるので、理解できない人はこの文を読んでさらに混乱するかもしれません。詳細は以下のとおりです。
標準的なドキュメント フロー
ページ内の DOM 要素は、HTML 内のタグ位置の順序に従って上から下、左から右に配置されます
🎜おそらくこの基本的な定義は誰もがすでによく知っています。しかし、これはどのように実践に移されるのでしょうか? 🎜🎜 ページに多数の display: inline-block 要素を配置すると、top->bottomleft->rightきれいに整理されています。これは、標準ドキュメント フロー の基本的な実施形態です。 🎜🎜 position や float などの属性を使用してドキュメント フローから分離すると、ページ level という別の概念が作成されます。 (遠すぎます...)🎜transform はデフォルトの位置属性を変更します
🎜 コード例は次のとおりです:🎜 html，body {
transform: translate3d(0,0,0);
}🎜クリックして例を表示します🎜🎜 dom 要素のデフォルトの位置属性は position: static; code> これは、標準ドキュメント ストリームの標準位置決め方法でもあります。 🎜🎜この例では、p がどのように上下にスクロールしても、ヘッダーとフッターは常に画面の上部と下部に配置されます。 🎜🎜しかし、最初に述べたように、transform:translate3d(0,0,0); を body または html に追加すると、次のようにすることができます。試してみると、もともと position:fixed; の 2 つの要素が従属せず、画面とともにスクロールすることがわかります。 🎜🎜実際、position:fixed; の参照オブジェクトは、一般にスクリーンと呼ばれるものではなく、viewport の HTML オブジェクト、通常はページ ( document. documentElement) はビューポートを生成します。 🎜🎜 document.documentElement.clientHeight を使用すると、実際のビューポートの高さを確認できます。fixed 要素は、これをコンテナとして使用して配置されます。 🎜🎜 transform 属性を body (または HTML) に追加すると、body DOM 全体が対応する変換を受けますが、現時点での「全体」とは、 body.ドキュメント フロー要素。これらの position:Absolute; / position:fixed; 要素は、本文が属するドキュメント フローから分離されているため、これらの要素は使用できません。身体の変化に依存して自分自身を変化させ、対応する変化効果を自然に達成します。 🎜🎜現時点では、このタイプの DOM に対応する変更を加えるために、ブラウザーは新しいビューポートを生成し、要素を配置するためのコンテナーとして存在し、transform 変換エフェクトに応答します。これにより、ドキュメント フローの外にある positioned 要素も変換できるようになります。 🎜🎜このビューポートは、position:fixed; の位置に重大な影響を及ぼします。「self」dom と同期してスクロールすると、fixed 要素とともに回転します。 absolute に似た奇妙な効果を生成します: 🎜🎜fixed 要素は absolute になり、document .documentElement に存在するようです。コード>同じサイズの「目に見えない」コンテナ内。 🎜拡張機能
🎜一部のモバイル デバイス (またはアプリ) では、ハード デコードによる <video> タグの再生がデフォルトで有効になっており、上記の現象も発生します。この時点では、ビデオはページ上で「フローティング」し、ページ要素と一緒に通常はスクロールしません。 🎜🎜同様の状況は、一部の低バージョンのモバイル ブラウザでも発生します。この考え方に従って解決してみてください。 🎜概要
🎜 実際、上記の状況は body で発生するだけでなく、 transform を追加すると、どの dom でもビューポートのような効果が生成されます。興味があれば試してみることができます。 🎜🎜 HTML ドキュメント フローに対する CSS3 変換の影響に関するその他の関連記事については、PHP 中国語 Web サイトに注目してください。 🎜🎜🎜