Chrome：当不相关的元素使用带有过渡的变换时，变换比例不能与滤镜模糊结合使用

Posted 2023-03-06

【中文标题】Chrome：当不相关的元素使用带有过渡的变换时，变换比例不能与滤镜模糊结合使用

【英文标题】：Chrome: transform scale doesn't work in combination with filter blur while unrelated element is using transform with transition

【发布时间】：2019-12-24 08:45:55

【问题描述】：

我有一张正在使用filter: blur(16px); transform: scale(1.3); 的图片。在此之上，我有一个带有overflow: hidden 的 div。然后在我使用transform: scale(1.15); transition: all 1s;的网站上有一个完全不相关的元素。

现在的问题是，当不相关元素的过渡处于活动状态时（所谓不相关，我的意思是它与另一个元素相去甚远），另一个元素回退到 scale(1) 直到过渡完成。此问题仅在 Google Chrome 中出现。 Firefox 和 Safari 都很好。

知道如何解决这个问题吗？

【问题讨论】：

你能提供一个minimal reproducible example吗？即使这只是解决 Chrome 中的错误的补丁，演示该问题的实际示例也将帮助未来遇到相同问题的访问者。

【参考方案1】：

好的，所以我找到了解决方法。不知道为什么会这样，但是在玩弄z-index 之后，我也能够在 Chrome 上解决这个问题。我只是用overflow: hidden 和z-index: 2 给了元素，这很有效。一定喜欢 CSS。