title: Edge browser adding overlapping "edges" to transparent divs
body: <p>I'm noticing that if I have 5 div elements that all share edges, when CSS transitions run, the edges start to overlap.  I made this JSFiddle to demonstrate the effect.  Click the "change" button a couple of times and you should start seeing the problem.</p>
  
  <p>Note: in Chrome, IE, and Firefox I <strong>do not</strong> see this behavior.  Only Edge.</p>
  
  <p>Is there a way to prevent this from happening?</p>
  
  <p><a href="https://jsfiddle.net/18fche3r/6/" rel="nofollow noreferrer">https://jsfiddle.net/18fche3r/6/</a></p>
  
  <p>Here is an image of what I'm seeing:</p>
  
  <p><a href="https://i.stack.imgur.com/IxpMZ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/IxpMZ.png" alt="enter image description here"></a></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var height = 100;
  var width = 100;
  
  $(function() {
    var change = $('#change')
    var top = $('#top')
    var bottom = $('#bottom')
    var left = $('#left')
    var right = $('#right')
    var center = $('#center')
  
    var update = function() {
      var windowWidth = $(window).width();
      var windowHeight = $(window).height();
      top.css({
        left: 0,
        top: 0,
        width: '100%',
        height: height + 'px'
      });
      bottom.css({
        left: 0,
        top: (2 * height) + 'px',
        width: '100%',
        height: (windowHeight - (2 * height)) + 'px'
      });
      left.css({
        left: 0,
        top: height + 'px',
        width: ((windowWidth - width) / 2) + 'px',
        height: height + 'px'
      });
      right.css({
        left: ((windowWidth + width) / 2) + 'px',
        top: height + 'px',
        width: ((windowWidth - width) / 2) + 'px',
        height: height + 'px'
      });
      center.css({
        left: ((windowWidth - width) / 2) + 'px',
        top: height + 'px',
        width: width + 'px',
        height: height + 'px'
      });
    }
  
    $(window).resize(update);
    update();
    change.click(function(){
      height = height === 100 ? 200 : 100;
      width =  width === 100 ? 200 : 100;    
      center.toggleClass('not-shown')
      update();
    })
  
  })</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#change {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 15;
  }
  
  .backdrop {
    background-color: rgba(0, 0, 0, 0.5);
    /* background-color: rgba(255, 255, 255, 0.5);*/
    -moz-transition: opacity 0.1s ease-in-out;
    -o-transition: opacity 0.1s ease-in-out;
    -webkit-transition: opacity 0.1s ease-in-out;
    transition: opacity 0.25s ease-in-out;
    opacity: 1;
    display: block;
    position: absolute;
    z-index: 10;
  }
  
  .backdrop.not-shown {
    opacity: 0 !important;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"&gt;&lt;/script&gt;
  
  &lt;button id="change"&gt;Change&lt;/button&gt;
  
  &lt;div class="backdrop" id="top"&gt;&lt;/div&gt;
  &lt;div class="backdrop" id="bottom"&gt;&lt;/div&gt;
  &lt;div class="backdrop" id="left"&gt;&lt;/div&gt;
  &lt;div class="backdrop" id="right"&gt;&lt;/div&gt;
  &lt;div class="backdrop" id="center"&gt;&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>