transform引发的问题

打开浏览器的硬件加速

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; width: 100%; background: red;">header</header>
        <div style="height: 2000px;"></div>
        <footer style="position: fixed; bottom: 0; width: 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

transform引发的问题

transform 改变定位默认属性

猜你喜欢