Chrome linear gradient bugs when dealing with subpixels

So I've been trying to use Linear Gradient for design my webpage, but for some reason Chrome doesn't like when it has to deals with subpixels.

Take a look at the snippet below. It works perfectly in Firefox, but in Chrome appears a thin line in the middle that disappears if the width is not odd. Also it completely breaks on Edge.

Does anyone knows a way to fix this to work in all browsers? (besides making sure that the containers is even).

div {
  width: 201px;
  height: 50px;
}
.arrow {
  box-sizing: content-box;
  border: none;
  background: linear-gradient(15deg, #f7f7f7 0, #f7f7f7 50%, #008f49 50%, #008f49 52%, rgba(255,0,0,0) 52%, rgba(255,0,0,0) 100%), linear-gradient(345deg, #f7f7f7 0, #f7f7f7 50%, #008f49 50%, #008f49 52%, rgba(255,0,0,0) 52%, rgba(255,0,0,0) 100%), #1b4376;
  background-repeat: no-repeat;
  background-position: 0 50%, 100% 50%;
  background-origin: padding-box;
  background-clip: border-box;
  background-size: 50% auto;
  min-height: 170px;
}
<div class="arrow">
</div>