打开浏览器的硬件加速
html, body { transform: translate3d(0,0,0); }
使用transform会导致浏览器硬件加速,这在在很多情况下会引起 html 层级文档流的“异常”
标准文档流,即页面中的 dom 元素按照其在 HTML 中的标签位置顺序进行从上到下、从左往右的排布过程
如果你在页面中放置一大堆 display: inline-block
的元素,它们会很乖巧的 上 -> 下 左 -> 右 排的很整齐。这就是标准文档流
的基础体现。
当你用position,float等属性使其脱离文档流时,就会又产生一个页面层级的概念
transform 改变定位默认属性
transform会使子元素fixed定位和absolute定位失效
<body> <header style="position: fixed; top: 0; 100%; background: red;">header</header> <div style="height: 2000px;"></div> <footer style="position: fixed; bottom: 0; 100%; background: blue;">footer</footer> </body>
例子中,不管 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下整个标准文档流的元素会产生相应的变换,对于那些 position: absolute; / position: fixed;已经脱离了 body 文档流的元素无法凭借 body 的变换使自己也自然的达到相应的变换效果。
此时,浏览器为了让这些脱离文档流的 DOM 得到相应的变化,会产生一个新的 viewport,这个 viewport 作为定位元素的容器存在,会响应 body 的 transform 变换效果,从而让里面那些脱离文档流的 positioned 元素也能进行transform变换。
这个新产生 viewport 会严重影响 position: fixed; 的定位,当它随着标准文档流的dom同步滚动的时候,会带着 fixed 元素一块滚,此时就会产生一种类似 absolute 的诡异效果
页面上一个任意的 dom 添加了 transform
之后都会生产一个类似 viewport 的效果
父元素设置了border-radius和overflow:hidden,但是子元素有transform属性,父元素设置无效
原文:https://segmentfault.com/a/1190000007785250?utm_source=tuicool&utm_medium=referral