擬似要素で覆われていない背景部分

Question

divの前後の擬似要素の上に線が表示され、IE（11）とEdge（25）で奇妙な動作が発生します。

注：これは唯一の「フルでない」で発生しますが、IEとエッジを持って右に、左に見えるようになっているものである（とChromeとFirefoxでそう）決議。したがって、1300ピクセルより広い解像度にはその境界線が含まれていません。

編集：私はそれを変換に絞り込んだ。行はスキューされた要素でのみ表示されます。

私は次のHTMLの構造を有する：スタイリングは、以下の（SCSS）です

<div class="col-xs-12 col-md-3 rightcontent"> 
    <div class="halfcolumn hcblue"> 
     <div class="hchlwrapper"> 
      <div class="hcheadline">NEWS</div> 
     </div> 
     ... 
    </div> 
</div> 

：すべての後に

/* 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; 
    } 
} 

Answer 1

、私はこのバグの振る舞いが見つかり最善の解決策は少しでした"回避策"：

• overflow: hiddenクラスの中にとhchlwrapper
• ：は-part "の前に"：101％までの高さ、トップに-1％、同様の変更を行う "：後" この道-element

、私が与えなければなりませんでした隠されたオーバーフローの快適さをアップしますが、今は上手く見えます。