點擊下載
本文文檔

當(dāng)前位置：首頁 - 科技 - 知識百科 - 正文

CSS3transform對HTML文檔流帶來的影響

來源：懂視網(wǎng) 責(zé)編：小采時間：2020-11-27 18:53:22

CSS3transform對HTML文檔流帶來的影響

CSS3transform對HTML文檔流帶來的影響:html 總是那么的驚奇來源于硬件加速年初的一個筆記，閑時整理出來。很多網(wǎng)上文章都說建議打開瀏覽器的硬件加速，這樣頁面渲染速度、動畫流暢性會提高。這幾乎成了很多人頁面制作的標(biāo)配，管實際有沒有用都來一個： html，body { transform: tra

推薦度：

點擊下載本文 文檔為doc格式

導(dǎo)讀CSS3transform對HTML文檔流帶來的影響:html 總是那么的驚奇來源于硬件加速年初的一個筆記，閑時整理出來。很多網(wǎng)上文章都說建議打開瀏覽器的硬件加速，這樣頁面渲染速度、動畫流暢性會提高。這幾乎成了很多人頁面制作的標(biāo)配，管實際有沒有用都來一個： html，body { transform: tra

來源于“硬件加速”

年初的一個筆記，閑時整理出來。

很多網(wǎng)上文章都說建議打開瀏覽器的硬件加速，這樣頁面渲染速度、動畫流暢性會提高。這幾乎成了很多人頁面制作的標(biāo)配，管實際有沒有用都來一個：

 html，body {
 transform: translate3d(0,0,0);
 }

但這在很多情況下會引起 html 層級文檔流的“異?！?。
W3C spec 中有如下描述:

In the HTML namespace, any value other than none for the transform results in the creation of both a stacking context and a containing block.
The object acts as a containing block for fixed positioned descendants.

意思是：
在 HTML 內(nèi)，沒有比對一個即是層疊對象又是容器塊的 DOM 進(jìn)行 transform 變換更沒有意義的了。
這類對象也扮演著 positioned(主要是 absolute/fixed ) 子孫元素容器的角色。

。。翻譯能力有限，不理解的人估計這句話看了后更暈，下面詳述。

標(biāo)準(zhǔn)文檔流

頁面中的 dom 元素按照其在 HTML 中的標(biāo)簽位置順序進(jìn)行從上到下、從左往右的排布過程

想必大家對這個基礎(chǔ)的定義已經(jīng)很熟悉了吧。但是，這個究竟在實際中有什么體現(xiàn)呢？

如果你在頁面中放置一大堆 display: inline-block 的元素，它們會很乖巧的上 -> 下左 -> 右排的很整齊。這就是標(biāo)準(zhǔn)文檔流的基礎(chǔ)體現(xiàn)。

當(dāng)你用position、float等屬性使其脫離文檔流時，就會又產(chǎn)生一個頁面 層級 的概念。(扯遠(yuǎn)了...)

transform 改變定位默認(rèn)屬性

例子代碼如下：

 <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 元素的默認(rèn)定位屬性是 position: static; 這也是標(biāo)準(zhǔn)文檔流的標(biāo)準(zhǔn)定位方式。

例子中，不管 p 怎么上下滾動，header 和 footer 會永遠(yuǎn)置于屏幕的最上和最下部。

但是如最初所述，給 body 或 html 加上一個 transform: translate3d(0,0,0);，你再去試，就會發(fā)現(xiàn)，原本 position: fixed; 的兩個元素都不聽話了，會隨著屏幕進(jìn)行滾動。

實際上，position: fixed; 的參考對象并不是大家所說的屏幕，而是一個 viewport 的html對象，一般地一個頁面(document.documentElement)會生成一個 viewport。

你用 document.documentElement.clientHeight 就可以的看到實際 viewport 的高度，其中 fixed 的元素都是以此為容器進(jìn)行定位的。

body(或html) 加了 transform 屬性以后，整個 body DOM 既會產(chǎn)生相應(yīng)的變換，但此時的“整個”僅是指 body 下標(biāo)準(zhǔn)文檔流元素，對于那些 position: absolute; / position: fixed; 元素，因為已經(jīng)脫離了 body 所屬的文檔流，所以無法憑借 body 的變換使自己也自然的達(dá)到相應(yīng)的變換效果。

此時，瀏覽器為了讓此類 DOM 得到相應(yīng)的變化，會產(chǎn)生一個新的 viewport，這個 viewport 作為定位元素的容器存在，會響應(yīng) body 的 transform 變換效果，從而讓里面那些脫離文檔流的 positioned 元素也能進(jìn)行變換。

這個 viewport 會嚴(yán)重影響 position: fixed; 的定位，當(dāng)它隨著“本尊”dom同步滾動的時候，會帶著 fixed 元素一塊滾，此時會產(chǎn)生一種類似 absolute 的詭異效果：

fixed 元素似乎變成了 absolute，存在于一個和document.documentElement大小一致的“看不見”容器內(nèi)。

引申情況

在一些移動端設(shè)備(或APP)上，給 <video> 標(biāo)簽的播放默認(rèn)開啟的硬解碼，此時也會產(chǎn)生上述現(xiàn)象，視頻會"浮"在頁面上面，不會隨頁面元素正常滾動。

還有一些低版本移動端瀏覽器上，也會出現(xiàn)類似的情況，可按此思路嘗試解決。

總結(jié)

其實上面的情況不只會發(fā)生在 body 上，一個任意的 dom 添加了 transform 之后都會生產(chǎn)一個類似 viewport 的效果，有興趣可以去嘗試。

引用:
http://www.gxlcms.com/

html 總是那么的驚奇