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

Without scrollbar:

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>