Turning off one pixel problem in CSS IE conversion

Question

I use transform: skewto create a down arrow effect on my banner image, using both :before, and :after tags. The result should look like this:

However, in IE 9-11, there seems to be a rounding issue. At some heights, there is one pixel from the background image, which is displayed below the skewed blocks, which leads to the following:

In my case, the banner represents a percentage of the total height of the window. Here is an example of code that should be able to reproduce the problem:

HTML

<div id="main">
    <div id="banner"></div>
    <section>
        <h1>...</h1>
        <p>...</p>
    </section>
</div>

CSS

#banner {
    position: relative;
    background-color: green;
    width: 100%;
    height: 75%;
    overflow: hidden;
}

#banner:before,
#banner:after {
    content: '';
    display: block;
    position: absolute;
    bottom: 0;
    width: 50%;
    height: 1.5em;
    background-color: #FFFFF9;
    transform: skew(45deg);
    transform-origin: right bottom;
}

#banner:after {
    right: 0;
    transform: skew(-45deg);
    transform-origin: left bottom;
}

body {
    background-color: #333;
    position: absolute;
    width: 100%;
    height: 100%;
}

#main {
    max-width: 40em;
    margin: 0 auto;
    background-color: #FFFFF9;
    position: relative;
    height: 100%;
}

section {
    padding: 0 1em 5em;
    background-color: #FFFFF9;
}

And here is a working example .

Answer 1

, , - , . , , - , , , .

( "" ), , , - , , , - .

"" -1px ( h1, , ), :

section {
  padding: 1em 1em 5em;
  background-color: #FFFFF9;
  position:relative;
  margin-top:-1px;
}    
section h1:first-child { margin-top:0; }

, , "" ( ) , - ( ), :-) (, , IE - ). - , .