Background portion not covered by pseudo elements - css

Question

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:
Note: This only occurs on "not full" resolutions. So, any resolution wider than 1300px is not containing that border.
EDIT: I narrowed it down to the transform. The line only appears with a skewed element.
I have the following html structure:
<div class="col-xs-12 col-md-3 rightcontent">
<div class="halfcolumn hcblue">
<div class="hchlwrapper">
<div class="hcheadline">NEWS</div>
</div>
...
</div>
</div>
The stylings are the following (scss):
/* 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

After all, the best solution I found for this buggy behaviour was a little "workaround":
get rid of overflow: hidden in the class halfcolumn and hchlwrapper
in the ":before"-part: height to 101%, top to -1%, do similar changes to the ":after"-element
This way, I had to give up the comfort of hidden overflows, but it looks fine now.