Edge 浏览器向透明 div 添加重叠 "edges"

Question

我注意到如果我有 5 个 div 元素共享边，当 CSS 转换运行时，边开始重叠。我做了这个 JSFiddle 来演示效果。单击 "change" 按钮几次，您应该会开始看到问题。

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

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

这是我所看到的图像：

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

您可以将过渡属性设置为 none 仅适用于将删除动画的 Microsoft 浏览器边缘，但这将解决您的问题。

这是更新后的 fiddle

transition:none;

JsFiddle

Answer 2

我以为这是某种舍入问题。或者边缘模糊。但无论如何我找到了一些有用的东西：

.backdrop {
   outline: 1px solid transparent;
}

Edge 浏览器向透明 div 添加重叠 "edges"

Edge browser adding overlapping "edges" to transparent divs

html

css

css-transitions

microsoft-edge