fixed 与 transform 相爱相杀的故事
上周和上上周一直苦恼于加动画，因为作为一个永远只能脑补出第一帧和最后一帧的动画渣，永远都不知道中间发生了什么，而这次遇到了一个问题，本身我的位置依靠的是 position: fixed 和一个依靠 display: flex 定位居中的元素来进行布局的，在动画表现时出现了位置不对的问题。
在一番 Debug 后（Emmm 具体的 Debug 方式就是控制变量法，人肉 Debug），我最后确定是 transform: scale(...) 和 position: fixed 的冲突问题。
具体的例子可以看下面的 Demo:
在这里，我们可以看到 transform: scale(...) 导致了 position 的表现从 fixed 变成了 absolute，直接导致了这一问题。
关于这一点，在 MDN 里其实是有解释的，只是一直没有关注过这一句话：
fixed属性会创建新的层叠上下文。当元素祖先的transform属性非none时，容器由视口改为该祖先。
好的好的，原来这个并不能算 Bug，反而称得上浏览器的 Feature。实际上这个 Feature 在不同浏览器的表现似乎也是不同的，这里暂不赘述，当然，也是有解决方案的。只要把父级元素的 scale 改为对本元素自身的操作即可。
也就是说，我们原本对于整体的缩放，现在变成了孤立的两个元素的缩放。
关于更详细的 transform 相关话题和 fixed 的坑，在查阅资料时发现了以下两篇文章可供参考：
植入部分
如果您觉得文章不错，可以通过赞助支持我。
如果您不希望打赏，也可以通过关闭广告屏蔽插件的形式帮助网站运作。
今天我也遇到这个问题了，动画和fixed定位不能共存，直接就导致fixed的标签无法固定，也没想到好的解决办法。