Can someone please help me with a strange bug in Chrome?
I am trying to create a responsive design for my app.
The width of the 'item' element should change based on the browser's width. It works fine when the page first loads in Chrome, but after I click on the 'item' and run the animation, the width does not adjust as the browser is resized. This seems to be an issue with the animation in Chrome specifically. Any suggestions would be greatly appreciated. Thanks!
html
<div id="wrapper">
<div class='item'>test 1</div>
<div class='item'>test 2</div>
<div class='item'>test 3</div>
</div>
css
.item{
display:inline-block;
background-color:yellow;
}
.open{
-webkit-animation: openMenu 1s;
animation:openMenu 1s;
}
.close{
-webkit-animation: closeMenu 1s;
animation:closeMenu 1s;
}
@media (min-width: 800px) and (max-width: 1000px) {
.item{
width:105px;
}
@-webkit-keyframes openMenu{
from {width: 105px;}
to {width: 170px;}
}
@keyframes openMenu{
from {width: 105px;}
to {width: 170px;}
}
@-webkit-keyframes closeMenu{
from {width: 170px;}
to {width: 105px;}
}
@keyframes closeMenu{
from {width: 170px;}
to {width: 105px;}
}
}
@media (min-width: 400px) and (max-width: 800px) {
.item{
width:75px;
}
@-webkit-keyframes openMenu{
from {width: 75px;}
to {width: 100px;}
}
@keyframes openMenu{
from {width: 75px;}
to {width: 100px;}
}
@-webkit-keyframes closeMenu{
from {width: 100px;}
to {width: 75px;}
}
@keyframes closeMenu{
from {width: 100px;}
to {width: 75px;}
}
}
js
$('.item').click(function(){
if($(this).hasClass('open')){
$(this).addClass('close').removeClass('open');
}else{
$(this).addClass('open').removeClass('close');
}
})