css - Chrome 上的剪辑路径在边缘留下一条奇怪的线

标签 css google-chrome clip-path

我使用 clip-path 来创建蓝色搜索按钮的特定形状。

在 Chrome 中,您会在切口边缘看到一条奇怪的线,而在 Firefox 中,一切正常。

我不是第一个指出这一点的人,但我还没有找到解决办法。

Chrome

enter image description here

火狐

enter image description here

剪辑路径是:

clip-path: polygon(0 0, 0 100%, 15px 50%);

这是什么 secret ?我也发现了类似的问题:

CSS - Strange border appearing on Chrome mobile with clip-path

最佳答案

我有一个类似(如果不相同)的问题,我通过将以下样式添加到具有 clip-path 的元素来解决此问题:

 transform: translateZ(0)

关于css - Chrome 上的剪辑路径在边缘留下一条奇怪的线,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51542919/

相关文章:

css - 垂直居中和拉伸(stretch)行导向的 Flexbox

javascript - 在不在右边的下面开始一个新行

html - 如何覆盖 Bootstrap 中主按钮的样式

d3.js - 如何使用 voronoi 多边形修改 d3 力布局以触发分组元素上的事件?

css - 有没有一种简单的方法来获取 GtkWidgetPath 的文本表示?

google-chrome - Greasemonkey @require 在 Chrome 中不起作用

javascript - Chrome 扩展程序可帮助学习

google-chrome - Chrome中CDN背后的woff2字体出现CORS问题

html - 使用 svg 描边作为剪辑路径

css - Safari 不重绘被剪辑路径隐藏的元素