1

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

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

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

.content {
    backface-visibility: hidden;
}

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

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

4

1 回答 1

0

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

于 2016-03-22T12:37:05.173 回答