In my project, I am encountering inconsistent return values for width when adding an "active" class to a selection of 4 items. These items are part of a horizontal slider that needs to adjust its elements' widths as one of them becomes active and changes due to a different font weight being applied.
The issue arises when I add the "active" class and immediately try to obtain the width of the element; it returns the old value instead of the updated one. To test this, I changed the class, logged all widths, then introduced a timeout of 50ms before logging the widths again right after. The results clearly show a discrepancy in the values:
pageNavButtons.addClass("active");
pageNavButtons.each(function () {
console.log(Math.ceil($(this).get(0).getBoundingClientRect().width));
});
$timeout(function(){
pageNavButtons.each(function ({
console.log(Math.ceil($(this).get(0).getBoundingClientRect().width));
});
},50);
Expectedly, I should see identical widths logged both times. However, what actually happens is as follows:
207
217
196
176
207
220
200
179
This inconsistency persists consistently. It seems like the renderer is still processing, leading me to wonder how I can make it wait. Attempting window.requestAnimationFrame did not solve the issue, and resorting to a timer would be considered a less optimal solution.
It's worth noting that I opted for getBoundingClientRect over jQuery's outerWidth() due to the latter's rounding down behavior, necessitating sub-pixel precision.
Any insights or suggestions on how to address this challenge?