框阴影，透视，溢出和背面可见性的非常奇怪的错误：隐藏在谷歌浏览器中

Question

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

https://github.com/spring-projects/spring-boot/tree/master/spring-boot-samples

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

.content {
    backface-visibility: hidden;
}

你得到的元素看起来比它们实际上更低和更低。 如果您的父元素有透视，则任何溢出（隐藏，自动，滚动 - 它们都将执行）和框阴影模糊，并且您的子元素具有背面 - 可见性：隐藏，然后该子元素内的所有内容都会向下移动并向右移动以获取像素数量在父级框阴影中定义。元素实际上仍然应该存在，它们只是在视觉上移动。尝试点击小提琴中的按钮，并注意它实际上位于父母的左上方，带有阴影。

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

Answer 1

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