Css 非常奇怪的bug，有框影、透视、溢出和背面可见性：隐藏在Google Chrome中

最近我在Google Chrome中遇到了一个非常奇怪的渲染行为。如果您使用本手册中描述的CSS的精确组合（除了转换，这只是为了演示）：

您可以使元素显示得比实际位置更低、更右。 如果父元素具有任何透视图、任何溢出（隐藏、自动、滚动-它们都可以）和带有模糊的框阴影，并且您的子元素具有背面可见性：隐藏，则该子元素内的所有内容都会按照父元素的框阴影中定义的像素量向下和向右移动。元素实际上仍然在它们应该在的地方，它们只是在视觉上移动。试着点击小提琴上的按钮，记住它实际上是在带阴影的左上角

---

你有没有想过这里到底发生了什么以及如何解决？Firefox中不会出现这种情况。暂时我不得不删除透视图，但我有一些真实场景中的动画，现在没有透视图看起来很枯燥。也许可以摆脱阴影，以其他方式实现，我可能会，因为我不认为这是可以解决的，但我只是想与全世界分享这一点，简短的谷歌搜索似乎并不表明以前遇到过这种情况。

似乎在较新版本的Chrome中得到了修复。

似乎在较新版本的Chrome中得到了修复。

它看起来确实像是一个jquery神奇的错误，将“背面可见性：隐藏；”关于.wrapper，我认为额外的.content包装器是@maioman，jQuery的问题，只是为了演示，即使没有它也会发生。我必须有背面可见性：隐藏在.content上，因为在现实世界中，我基本上有一张带有2个.content div的翻页卡，可以从一个动画切换到另一个动画。它看起来确实像是一个jquery魔术错误，放置“背面可见性：隐藏；”关于.wrapper，我认为额外的.content包装器是@maioman，jQuery的问题，只是为了演示，即使没有它也会发生。我必须有背面可见性：隐藏在.content上，因为在现实世界中，我基本上有一张带有2个.content div的翻盖卡片，可以通过动画从一个翻转到另一个。

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

.content {
    backface-visibility: hidden;
}