Question

我注意到如果我有5个div元素都共享边缘，当CSS转换运行时，边缘开始重叠。我制作了这个JSFiddle来演示效果。点击＆＃34;更改＆＃34;按钮几次，你应该开始看到问题。

注意：在Chrome，IE和Firefox中我不会看到此行为。只有Edge。

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

以下是我所看到的图片：

＆＃13;

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 1

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

.backdrop {
   outline: 1px solid transparent;
}

Answer 2

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

这是更新的小提琴

transition:none;

JsFiddle

边缘浏览器添加重叠＆＃34;边缘＆＃34;透明的div

2 个答案: