html 總是那麼的驚奇
來源於“硬體加速”
年初的一個筆記,閒時整理出來。
很多網上文章都說建議開啟瀏覽器的硬體加速,這樣頁面渲染速度、動畫流暢性會提高。這幾乎成了很多人頁面製作的標配,管實際有沒有用都來一個:
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 內,沒有比對一個即是層疊物件又是容器塊的 DOM 進行 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>
<div style="height: 2000px;"></div>
<footer style="position: fixed; bottom: 0; width: 100%; background: blue;">footer</footer>
</body>
dom 元素的預設定位屬性是 position: static;
這也是標準文件流的標準定位方式。
例子中,不管 div 怎麼上下滾動,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
之後都會生產一個類似 viewport 的效果,有興趣可以去嘗試。
引用:
http://meyerweb.com/eric/thoughts/2011/09/12/un-fixing-fixed-elements-with-css-transforms/