为什么Chrome中`transform: scale(1)`会改变fixed定位footer的位置？

这个差异是CSS规范的明确规定导致的：

• 当元素的transform属性取值不为none时，无论该transform值是否带来视觉上的变化，该元素都会成为其内部所有position: fixed子元素的包含块，替代默认的视口作为定位参照物。

你给出的两段代码刚好对应两种完全不同的定位场景：

1. transform: none的body场景：

   <body style="background-color: #000000; color: #ffffff; transform-origin:top left; transform:none">
     <footer style="position:fixed; bottom:0">I'm down here!</footer>
   </body>
   

   此时body的transform为默认值，fixed定位的footer以视口为包含块，bottom: 0会让footer紧贴视口底部展示。
2. transform: scale(1)的body场景：

   <body style="background-color: #000000; color: #ffffff; transform-origin:top left; transform:scale(1)">
     <footer style="position:fixed; bottom:0">I'm down here!</footer>
   </body>
   

   此时body设置了非none的transform，成为footer的包含块，bottom: 0是相对于body元素的底部对齐。如果body的高度小于视口高度，视觉上footer就会和视口底部出现明显间距，和你观测到的现象完全一致。

如果需要保留transform设置同时让fixed元素相对于视口定位，可以将fixed元素移出设置了transform的父元素，直接作为body的直接子元素即可。

内容的提问来源于stack exchange，提问作者bers