当滚动条存在时，Chrome中的-webkit-clip-path神秘线

Question

在Google Chrome中使用-webkit-clip-path创建有角度的边框效果时，只有当滚动条存在时，才能看到等宽背景元素的神秘条子。

使用滚动条：

没有滚动条：

我在计算的样式中看不到会导致这种情况的任何内容。有没有办法可以始终如一地达到理想的外观（没有线条）？最好不要使用一些伪/绝对定位元素来隐藏它。

代码（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>

Answer 1

您可以使用以下代码段隐藏此行。

.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>

如果您移除margin:0 auto; .container，该行也会消失（-webkit-clip-path上没有更改）！

<强>说明： auto上的margin值会创建此红线，因为右边距是0.5px的浮点数。但谷歌Chrome无法画出半条线。因此，保证金向下舍入到下一个，而不是浮动值0.0px，.container被拉伸。其他浏览器向上舍入到1.0px，并且不显示该行。

容器外部如下所示：

.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>

所以你看到右边红色区域的1px！