CODEWITHSUNDEEP
cssgoogle-chrome
aw04
aw04

Reputation: 11187

-webkit-clip-path mysterious line in chrome when scrollbar present

When using -webkit-clip-path in Google Chrome to create an angled border effect, a mysterious sliver of the equal width background element is visible only when the scrollbar is present.

With scrollbar:

enter image description here

Without scrollbar:

enter image description here

I can't see anything in the computed styles that would cause this. Is there a way I can consistently achieve the desired look (without the line)? Preferably without using some pseudo/absolute positioned element to hide it.

The Code (http://codepen.io/anon/pen/EKmYgP):

.container {
  background: #ff0000;
  width: 400px;
  margin: 0 auto;
}
.block {
  background: #fff;
  height: 400px;
  -webkit-clip-path: polygon(0px 20%, 100% 0px, 100% 100%, 0px 100%)
}
<div class="container">
  <div class="block"></div>
</div>

Upvotes: 6

Views: 1533

Answers (1)

Sebastian Brosch
Sebastian Brosch

Reputation: 43594

You can hide this line by using the following snippet. 

.container {
  background: #ff0000;
  width: 400px;
  margin: 0 auto;
}
.block {
  background: #fff;
  height: 400px;
  -webkit-clip-path: polygon(0px 20%, calc(100% + 1px) 0px, calc(100% + 1px) 100%, 0px 100%);
  
  /** or this... 
  -webkit-clip-path: polygon(0px 20%, 101% 0px, 101% 100%, 0px 100%);
  */
}
<div class="container">
  <div class="block"></div>
</div>

If you remove the margin:0 auto; of .container the line disappears too (without changes on -webkit-clip-path)!

Explanation: The auto value on margin create this red line, because the right margin is a floating number like 0.5px. But Google Chrome can't draw a half line. So the margin get rounded down to the next, not floating value 0.0px and the .container get stretched. Other Browser round up to 1.0px and the line doesn't appear.

The outside of the container looks like this:

.container {
  background: #ff0000;
  width: 400px;
  margin: 0 auto;
}
.block {
  background: #fff;
  height: 400px;
  -webkit-clip-path: polygon(0px 20px, 100px 0px, 100px 100px, 0px 100px);
}
<div class="container">
  <div class="block"></div>
</div>

So you see 1px of the red area on the right side!

Upvotes: 2

Related Questions