CODEWITHSUNDEEP
cssgoogle-chromeclip-path
Philip Norton
Philip Norton

Reputation: 41

clip-path horizontal white line in Chrome

Got clip-path set on div with background image. When in Chrome horizontal white lines appear through the div / background image. Anyone know how to remove this?

See screenshot: Screenshot with horizontal white line bug

Here is also a link to the course page https://www.sunderland.ac.uk/study/health-paramedic-clinical-sciences/undergraduate-biomedical-science/#facilities

Upvotes: 4

Views: 3467

Answers (2)

Brent
Brent

Reputation: 380

Ran into this same issue recently. I added a -1px margin to the edge with the white line.

.clipped-box {
  clip-path: polygon(0 0, calc(100% - 60px) 0%, 100% 60px, 100% 100%, 0 100%);
  margin-bottom: -1px;
}

I had this issue when trying to stack two sections with clipping masks. The top section had the white line on the bottom. So I pulled the next section up into it.

Upvotes: 6

jeanpaulxiao
jeanpaulxiao

Reputation: 323

This issue has been spotted before, see Clip-path on Chrome leaves a strange line on the edge and CSS - Strange border appearing on Chrome mobile with clip-path

It appears to be a Chrome rendering bug.

For your case, I was able to make the line disappear by setting a height to your polygon container:

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

The height is only slightly higher than current.

No other CSS properties I've tested seem to have an effect on the line.

Upvotes: 1

Related Questions