html - 边缘浏览器将重叠的 "edges"添加到透明 div

Question

我注意到如果我有 5 个共享边缘的 div 元素，当 CSS 过渡运行时，边缘开始重叠。我做了这个 JSFiddle 来演示效果。单击“更改”按钮几次，您应该会开始看到问题。

注意:在 Chrome、IE 和 Firefox 中，我没有看到这种行为。只有边缘。

有没有办法防止这种情况发生？

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

这是我所看到的图像:

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

我认为这是某种舍入问题。或者边缘模糊。但无论如何我发现了一些有用的东西:

.backdrop {
   outline: 1px solid transparent;
}