jQuery .animate() causing layout shift when modifying width dynamically on page resize
I recently switched to This might be a silly question, but I'm currently facing an issue where using jQuery's `.animate()` method to change the width of a sidebar is causing unexpected layout shifts during a window resize... This happens when the sidebar is initially set to a specific width based on the viewport size, and on window resize, I'm trying to animate it to a new width based on a different condition. Here's a simplified version of my code: ```javascript $(window).resize(function() { var newWidth; if ($(window).width() < 768) { newWidth = '80%'; } else { newWidth = '250px'; } $('#sidebar').stop().animate({ width: newWidth }, 300); }); ``` When I resize the window, the sidebar animates as expected, but the rest of the layout jumps around, which isn't the behavior I want. I've tried using `stop()` to prevent queuing of animations, but it doesn't seem to help much. Additionally, I have set the `box-sizing` property to `border-box`, so padding and border sizes are included in the total width calculation, as recommended in modern CSS practices. The sidebar has a fixed position in the layout, and other elements adjust based on its width. However, the shifting still occurs, and it disrupts the user experience, especially on quick window resizes. Is there a way to handle the animation without causing the layout to jump? I also considered using CSS transitions instead of jQuery animations, but I prefer to stick with jQuery in this case for compatibility purposes. Any insights or alternative approaches would be greatly appreciated! Has anyone else encountered this? For context: I'm using Javascript on macOS. I appreciate any insights! I recently upgraded to Javascript stable. Any feedback is welcome!