css - Clip-path on Chrome leaves a strange line on the edge

Question

I use clip-path to create the particular shape of the blue search button.

From Chrome you see a strange line at the cutout edge, while from Firefox everything is OK.

I am not the first to point this out, but I have not found a solution.

Chrome

Firefox

The clip-path is:

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

What mystery is this? I also found a similar issue:

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

Answer 1

I had a similar issue where the right edge of a clip path was sitting just inside of 100%. I was able to fix this by setting the right edge x-coordinate values to 101% and adding overflow: hidden; to the parent element.

clip-path: polygon(0 0, 101% 0, 101% 80%, 0 100%);

I imagine you could do the same on the left side by inputting negative values?

Image before fix

Image after fix