Currently experiencing this issue in Chrome, although Firefox seems to be working fine so far.
Here is a greatly simplified version of the problem:
HTML:
<div class="thumbnail">
<a href='#' id="clickMe">Click me!</a>
</div>
CSS:
div {
width: 200px;
height: 300px;
background-color: purple;
}
a {
position: absolute;
}
@media (max-width: 991px) {
div {
height: 200px;
}
}
Javascript:
$(document).ready(function () {
var $parent = $('#clickMe').parent();
function resize() {
$('#clickMe').offset({
top: $parent.offset().top + $parent.height()-$('#clickMe').height()
});
}
$(window).on('resize', resize);
resize();
});
The issue at hand:
When resizing (without dragging), the JavaScript sets the position of the <a></a> element before the CSS applies any height changes if the window size is less than 992px.
As a result, the button ends up visually outside of the div rather than on the border where it was originally intended to be.
Temporary solution proposed in this post:
jQuery - how to wait for the 'end' of 'resize' event and only then perform an action?
var doit;
$(window).on('resize', function(){ clearTimeout(doit); doit = setTimeout(resize, 500); });
Not satisfied with the temporary solution:
In my case, waiting for the end of the resizing event isn't necessary. I simply want my JavaScript to run after the CSS has finished loading or applying its changes. Using the provided function feels sluggish as it randomly triggers the JS when the CSS may not be fully applied yet.
The question remains:
Is there a way to ensure that JavaScript executes only after CSS has completed making modifications during a resize event? Any techniques in JS to achieve this?
Additional Information:
Please note that testing this on jsfiddle might yield different results due to my extensive CSS file and the utilization of Twitter Bootstrap, both of which can slow down the CSS application process. Your insights are welcome.
Miljan Puzović suggested a solution involving loading CSS files via JS, then triggering JS changes when the CSS event comes to a close.