CSS变换动画会导致后续模糊元素出现视觉故障（仅限Chrome）

所以这有点奇怪。我有一个模糊元素（

filter:blur（…）

，这里只是一个黑框），它被稍微放大（

transform:scale（2）

）以隐藏模糊的边缘。现在，当前面的元素为

transform

属性设置动画时，模糊元素在动画期间会显示一个视觉小故障（可能会丢失其

比例（2）

，但我不确定）

我在Chrome（Linux上）中看到了这种行为，但在Firefox中没有看到

我曾尝试将

backface visibility:hidden

和

translateZ（0）

添加到模糊元素中，但它们实际上会导致刚才描述的相同视觉故障。我不知道这是为什么

对此问题的任何解决方法或见解都将不胜感激！这是一个最小的复制：

按钮{
宽度：400px；
高度：60px；
转换：转换500ms；
}
按钮：悬停{
转换：translateY（-4px）；
}
.集装箱{
边缘顶部：20px；
溢出：隐藏；
高度：200px；
宽度：400px；
}
.模糊{
身高：100%；
宽度：100%；
溢出：隐藏；
背景：黑色；
过滤器：模糊（10px）；
转换：比例（1.2）；
}

将鼠标悬停在我身上

如果您使用

transform:translateY（20px）

而不是

margin top:20px

该错误将被修复

按钮{
宽度：400px；
高度：60px；
转换：转换500ms；
}
按钮：悬停{
转换：translateY（-4px）；
}
.集装箱{
变换：translateY（20px）；
溢出：隐藏；/*删除溢出：隐藏以查看模糊*/
高度：200px；
宽度：400px；
}
.模糊{
身高：100%；
宽度：100%；
溢出：隐藏；
背景：黑色；
过滤器：模糊（10px）；
转换：比例（1.2）；
}

将鼠标悬停在我身上

当您在没有3D图形处理器支持的情况下进行软件渲染时，Chrome中有时会出现这些问题

据我所知，您可以通过使用任意Z坐标

变换

触发3d支持。 因此，将

translateZ（0）

添加到

.fuzzle

中的缩放变换后，故障就会消失

老办法

按钮{
宽度：400px；
高度：60px；
转换：转换500ms；
}
按钮：悬停{
转换：translateY（-4px）；
}
.集装箱{
边缘顶部：20px；
溢出：隐藏；
高度：200px；
宽度：400px；
}
++ 
.模糊{
身高：100%；
宽度：100%；
溢出：隐藏；
背景：黑色；
过滤器：模糊（10px）；
变换：比例（1.2）translateZ（0）；
}

将鼠标悬停在我身上

感谢您的回复！这可能是Linux上Chrome的一个问题（我已经在描述中添加了这一信息），或者我的意图不够好。通过此更改，我在框上看到一个模糊的轮廓，无论是否悬停：我的预期行为是拥有一个清晰的轮廓，而不受悬停按钮元素的影响。这有点令人困惑，因为我选择了一个黑匣子，模糊实际上是看不见的…这看起来像是一个黑客，但一个有效的黑客！事实上，这可以简化为将

transform:scale（1）

放在

.container

上，并保持其余部分不变。非常感谢。