Edge browser adding overlapping "edges" to transparent divs

Question

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.

Note: in Chrome, IE, and Firefox I do not see this behavior. Only Edge.

Is there a way to prevent this from happening?

https://jsfiddle.net/18fche3r/6/

Here is an image of what I'm seeing:

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();
  })

})

#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;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

<button id="change">Change</button>

<div class="backdrop" id="top"></div>
<div class="backdrop" id="bottom"></div>
<div class="backdrop" id="left"></div>
<div class="backdrop" id="right"></div>
<div class="backdrop" id="center"></div>

Answer 1

I assumed it was some kind of rounding issue. Or blurred edges. But anyway I found something that works:

.backdrop {
   outline: 1px solid transparent;
}

Answer 2

You can set the transition property to none only for the Microsoft browser edge that will remove the animation but this will solve your problem.

Here is the updated fiddle

transition:none;

JsFiddle