非常奇怪的 box-shadow、perspective、overflow 和 backface-visibility 错误：隐藏在 Google Chrome 中

Question

我最近在 Google Chrome 中运行遇到了非常严重的运行ge 渲染行为。如果你使用这个fiddle中描述的CSS的确切组合（t运行sition除外，它只是为了演示目的）：

.wrapper {
    perspective: 1px;
    overflow: hidden;
    box-shadow: 0 0 21px black;
}

.content {
    backface-visibility: hidden;
}

您让元素看起来比实际位置更靠右。如果您的 parent 元素有任何 perspective、任何 overflow（隐藏、自动、滚动 - 它们都会do) 和带有模糊的 box 阴影，并且您的 child 元素具有 backface-visibility: hidden然后该子元素内的所有内容都会向下和向右移动父框阴影中定义的像素数量。元素实际上仍然在它们应该在的位置，它们只是在视觉上移动。尝试单击 fiddle 中的按钮，注意它实际上位于带有阴影的父项的左上角。

关于这里到底发生了什么以及如何解决它有什么想法吗？在 Firefox 中不会发生。暂时我不得不删除透视图，但我在真实情况下有一些动画，现在没有透视图看起来很沉闷。可能会摆脱阴影并以其他方式制作它，我可能会这样做，因为我认为这无法修复，但我只是想与世界分享这个，简短的谷歌搜索似乎并不表明之前遇到过这种情况.

Answer 1

似乎已在较新版本的 Chrome 中修复。

非常奇怪的 box-shadow、perspective、overflow 和 backface-visibility 错误：隐藏在 Google Chrome 中

Very strange bug with box-shadow, perspective, overflow and backface-visibility: hidden in Google Chrome

css

google-chrome

box-shadow