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

Question

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

带滚动条：

没有滚动条：

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

代码（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。但谷歌浏览器无法画出半条线。因此，边距会向下舍入到下一个，而不是浮动值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右侧的红色区域！