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

Posted 2023-03-05

【中文标题】具有剪辑路径的元素中的水平（子）像素间隙

【英文标题】：Horizontal (sub)pixel gaps in element with clip-path

【发布时间】：2019-09-03 00:53:23

【问题描述】：

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

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

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

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

【参考方案1】：

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