【问题标题】：Horizontal (sub)pixel gaps in element with clip-path具有剪辑路径的元素中的水平（子）像素间隙
【发布时间】：2019-09-03 00:53:23
【问题描述】：
我有一个 SVG 剪辑路径，我将其应用于包含其他几个元素的元素。如果这些子元素中的任何一个创建了新的堆叠上下文，例如通过transform: translateZ(0)，我得到了水平（子）像素间隙——见图。
这发生在 MacOS 上的 Chrome 和 Opera 中，并且仅在某些视口高度上发生。
有没有办法解决这个问题？
Fiddle 的问题。尝试垂直调整预览窗格的大小。
【问题讨论】：
标签：
html
css
google-chrome
webkit
opera
【解决方案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));，这样应该可以消除底部间隙。