marcj / css-element-queries

CSS Element-Queries aka Container Queries. High-speed element dimension/media queries in valid css.
http://marcj.github.io/css-element-queries/
MIT License
4.27k stars 487 forks source link

Problems with CSS transitions #75

Open jscontrust opened 8 years ago

jscontrust commented 8 years ago

When there is a transition on the width of the element or on a parent element, the right styles are not always applied.

div.whatever { width: 500px; transition: width 0.5s; }

@media screen and (max-width: 400px) { width: 200px; }

div.whatever[max-width: 300px] { background-color: red; }

div.whatever never becomes a red background.

Is this library still under development?

jscontrust commented 8 years ago

Ok, another info: I had the same problems with a bootstrap column with different size for different screen sizes:

<div class='row'>
    <div class='col-sm-8 col-md-5'>
    </div>
</div>

I helped myself with:

$( window ).resize(function() {
    // On resize finish
    clearTimeout($.data(this, 'resizeTimer'));
    $.data(this, 'resizeTimer', setTimeout(function() {
        window.ElementQueries.update();
    }, 500));
});
marcj commented 8 years ago

The newest version has a transition fix in it. Could you please try this version and say us if you keep having issues with it?