具有剪切路径的元素中的水平（子）像素间隙

Question

我有一个SVG剪辑路径，适用于包含其他几个元素的元素。如果这些子元素中的任何一个创建新的堆叠上下文，例如到transform: translateZ(0)，我得到了水平（子）像素间隙–请参见图片。

这发生在MacOS上的Chrome和Opera中，并且仅在某些视口高度上发生。

有没有办法解决这个问题？

Fiddle的问题。尝试垂直调整预览窗格的大小。

Answer 1

我很确定这是一个错误。您可以通过使用clip-path向calc()值添加一点来修复它。例如，如果您使用的是clip-path: polygon(0% 0%, 0% 100%, 100% 100%);，则可以将其更改为clip-path: polygon(0% 0%, 0% calc(100% + 0.5px), 100% calc(100% + 0.5px));，这样可以消除底部的空白。