盒子阴影、透视、溢出和背面可见性的非常奇怪的错误：隐藏在 Google Chrome 中

Question

我最近在 Google Chrome 中遇到了一个非常奇怪的渲染行为。如果您使用此小提琴中描述的 CSS 的确切组合（过渡除外，仅用于演示目的）：

https://jsfiddle.net/yjtpjstx/1/

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

.content {
    backface-visibility: hidden;
}

您可以让元素显示在比实际位置更低和更靠右的位置。 如果你的 parent 元素有任何 perspective、任何 overflow（隐藏、自动、滚动 - 它们都可以）和 box 阴影带有模糊，并且您的 child 元素具有 backface-visibility: hidden 然后该子元素内的所有内容都会出现向下和向右移动的像素数量在父母的盒子阴影中定义。元素实际上仍然在它们应该在的位置，它们只是在视觉上移动。尝试单击小提琴中的按钮，并注意它实际上位于父级的左上角，并带有阴影。

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

Answer 1

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