CSS：使用比例转换时出现奇怪的线条

Question

我在 CSS 缩放过渡方面遇到了一些奇怪的问题。缩放效果很好，但是缩放元素周围有一些奇怪的线条，滚动后消失。这发生在 Chrome 浏览器和 Microsoft Edge 中。而且我不认为它与边距、填充、z-index、颜色或其他任何东西有关，因为它发生在相关 CSS 中包含和不包含这些属性的情况下。

这是相关的 CSS 快速草稿：

.element {
    background-color:black;
    transition: transform 0.5s;
    transform:scale(1, 1, 1);
}

.element:hover {
    transform:scale(1.1, 1.1);
}

这里有一个快速记录来证明：https://streamable.com/cyvkjm

这也是为某些原因无法观看视频的人提供的屏幕截图：

Answer 1

您的流媒体链接对我来说效果很好。我记得前段时间遇到过类似的问题，这与使用 3d 缩放有关 不过检查一下，我相当肯定 backface-visibility: hidden 和 -webkit 等效项将修复它。由于我无法重现这一点，我无法提供更多帮助 CSS transition on element leaving lines

编辑：在重现问题后，我们找到了解决方法。经过测试并在 Chrome/Edge/Firefox 中运行。透视（1000px）似乎比透视（0）效果更好

.element {
  transform: scale(1) perspective(1000px);
}
.element:hover {
  transform: scale(1.1) perspective(1000px);
}