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

Question

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

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

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

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

“ >>

我有一个SVG剪辑路径，适用于包含其他几个元素的元素。如果这些子元素中的任何一个创建新的堆叠上下文，例如通过转换：translationZ（0），我得到...

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));，这样可以消除底部间隙。