CODEWITHSUNDEEP
cssgoogle-chromeclip-path
Federico Liva
Federico Liva

Reputation: 578

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

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

enter image description here

Firefox

enter image description here

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

Upvotes: 13

Views: 5526

Answers (4)

Garavani
Garavani

Reputation: 785

In my case will-change: transform helped. From the answer here: Fixing Transparent Line Between Div with Clip-Path and Parent Div

Upvotes: 0

mikep
mikep

Reputation: 7457

In my case suggested transform: translateZ(0) and transform: scaleZ(1) did not help but this one yes...

transform: skewY(0.001deg);

UPDATE: it fixed problem on some devices but not on another devices with the same chrome version (!). So this Chromium bug is very unpleasant and unhackable easily. We must refactored it from the scratch and create triangles as part of whole arrow button using clip-path CSS property...

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

Here is a tool to generate clip-paths: https://unused-css.com/tools/clip-path-generator

Upvotes: 8

shaneSC
shaneSC

Reputation: 61

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

Upvotes: 6

Neaox
Neaox

Reputation: 1972

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)

Upvotes: 9

Related Questions