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>
Aucun commentaire:
Enregistrer un commentaire