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

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

Answer 2

I had a similar (if not the same) issue, I fixed this by adding the following style to the element with the clip-path:

 transform: translateZ(0)