打开浏览器的硬件加速
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