html两方框重叠透明,html – 边缘浏览器向透明div添加重叠的“边缘”

我注意到如果我有5个div元素共享边缘,当CSS转换运行时,边缘开始重叠.我制作了这个JSFiddle来演示效果.单击“更改”按钮几次,您应该开始看到问题.

注意：在Chrome,IE和Firefox中,我没有看到此行为.只有Edge.

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

这是我所看到的图像：

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',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',height: height + 'px'

});

center.css({

left: ((windowWidth - width) / 2) + '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.5);

/* background-color: rgba(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;

}

Change