title: Background portion not covered by pseudo elements
body: <p>I get a strange behaviour in IE (11) and Edge (25) with a line showing on top of pseudo elements (before and after) in a div. On the left is what it is supposed to look like (and does so in Chrome and Firefox), on the right you have IE and Edge:</p>
  
  <p><a href="https://i.stack.imgur.com/va1gq.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/va1gq.png" alt="enter image description here"></a> <a href="https://i.stack.imgur.com/Xc3Ak.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Xc3Ak.png" alt="enter image description here"></a></p>
  
  <p>Note: This only occurs on "not full" resolutions. So, any resolution wider than 1300px is not containing that border. </p>
  
  <p><strong>EDIT: I narrowed it down to the transform. The line only appears with a skewed element.</strong></p>
  
  <p>I have the following html structure:</p>
  
  <pre><code>&lt;div class="col-xs-12 col-md-3 rightcontent"&gt;
      &lt;div class="halfcolumn hcblue"&gt;
          &lt;div class="hchlwrapper"&gt;
              &lt;div class="hcheadline"&gt;NEWS&lt;/div&gt;
          &lt;/div&gt;
          ...
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>The stylings are the following (scss):</p>
  
  <pre><code>/* Colors */
  $red: #FF0000;
  $green: #00FF22;
  $yellow: #FFF700;
  $black: #000000;
  $blackrgba: rgba(0,0,0,0.5);
  $grey: #D7D7D7;
  $greydark: #808080;
  $lightgrey:#EcEBEB;
  $white: #FFFFFF;
  $bluelight: #6882B5;
  $darkblue: #003399;
  $ikbblue: #003399;
  $ikbgreen: #B2D84C;
  
  /* Heights, widths */
  $full-width: 1300px;
  $large-width: 1200px;
  $desktop-width: 992px;
  $medium-width: 768px;
  $small-width: 576px;
  $min-width: 320px;
  .halfcolumn{
  
          padding-right: 25px;
          padding-bottom: 25px;
          overflow: hidden;
  
  
          .hcheadline{
              font-weight: bold;
              text-align: center;
              padding: 15px 0 15px 0px;
              color: $ikbgreen;
              overflow: hidden;
  
              @media (min-width: $full-width){
                  font-size: 30px;
                  margin-right: 40px;
              }
              @media (min-width: $large-width) and (max-width: 1299px){
                  font-size: 30px;
                  margin-right: 20px;
              }
              @media (min-width: $desktop-width) and (max-width: 1199px){
                  font-size: 22px;
                  margin-right: 20px;
              }
              @media (min-width: $medium-width) and (max-width: 991px){
                  font-size: 15px;
                  margin-right: 8px;
              }
              @media (min-width: 468px) and (max-width: 767px){
                  font-size: 22px;
                  margin-right: 130px;
              }
              @media (min-width: 380px) and (max-width: 467px){
                  font-size: 14px;
                  margin-right: 90px;
              }
              @media (max-width: 379px){
                  font-size: 14px;
                  margin-right: 60px;
              }
          }
  
          .hchlwrapper{
              position: relative;
              z-index: 1;
              overflow: hidden;
          }
  
          .hchlwrapper:before{
              content: '';
              position: absolute;
              background-color: $white;
              width: 100%;
              height: 100%;
              left: -10%;
              top: 0px;
              -webkit-transform: skew(-20deg,0deg);
              -moz-transform: skew(-20deg,0deg);
              transform: skew(-20deg,0deg);
              z-index: -1;
              @media (min-width: $desktop-width) and (max-width: 1199px){
                  left: -11%;
              }
              @media (min-width: $medium-width) and (max-width: 991px){
                  left: -13%;
              }
              @media (min-width: 468px) and (max-width: 767px){
                  left: -7%;
              }
              @media (min-width: 370px) and (max-width: 467px){
                  left: -8%;
              }
              @media (max-width: 369px){
                  left: -9%;
              }
          }
          .hchlwrapper:after{
              content: '';
              position: absolute;
              background-color: $white;
              left: 88%;
              width: 9%;
              height: 35%;
              top: 0%;
              z-index: -1;
              -webkit-transform: skew(-20deg,0deg);
              -moz-transform: skew(-20deg,0deg);
              transform: skew(-20deg,0deg);
          }
  
          .hccontent{
              padding-left: 25px;
          }
  
      }
  
      .hcblue{
          background-color: $ikbblue;
          color: $white;
      }
      .hcgreen{
          background-color: $ikbgreen;
          color: $white;
      }
      .hcgray{
          background-color: $greydark;
          color: $white;
      }
  }
  </code></pre>