Chrome中的剪切路径水平白线

Question

在div上设置了具有背景图像的剪辑路径。在Chrome中，水平的白线会通过div /背景图像显示。有人知道如何删除吗？

查看屏幕截图： Screenshot with horizontal white line bug

这也是课程页面的链接 https://www.sunderland.ac.uk/study/health-paramedic-clinical-sciences/undergraduate-biomedical-science/#facilities

Answer 1

此问题以前已被发现，请参见Clip-path on Chrome leaves a strange line on the edge和CSS - Strange border appearing on Chrome mobile with clip-path

这似乎是Chrome渲染错误。

对于您而言，通过设置多边形容器的高度，我能够使线条消失：

.course_page #facilities .facility--menu {
    clip-path: polygon(0 0,100% 5%,100% 95%,0 100%);
    height: 25em;
}

高度仅略高于当前高度。

我测试过的其他CSS属性似乎都没有影响这一行。

Answer 2

最近也遇到了同样的问题。我在白线边缘添加了一个@Component @Qualifer("a") public class A implements Generic{ ..... public void test(){ }} @Component @Qualifer("b") public class B implements Generic{ ..... public void read(){ }} @component public class C { @Autowired Generic a; @Autowired Generic b; ... call respective methods } 边距 。

-1px

当尝试使用剪贴蒙版堆叠两个部分时遇到了这个问题。顶部的底部有白线。所以我将下一部分拉到了上面。