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 的坑,在查阅资料时发现了以下两篇文章可供参考:

如果您觉得文章不错,可以通过赞助支持我

标签: 知识, 代码段, 语法

添加新评论