jQuery .animate() causing layout shift when animating width in Chrome
I've looked through the documentation and I'm still confused about I'm upgrading from an older version and I've searched everywhere and can't find a clear answer. I'm experiencing an scenario with jQuery's `.animate()` method where animating the `width` of a div is causing unexpected layout shifts in Chrome. The animation seems to work fine in Firefox, but in Chrome, the surrounding elements are shifting during the animation, which is not the intended behavior. I have the following code: ```javascript $(document).ready(function() { $('#myDiv').click(function() { $(this).animate({ width: '200px' }, 500); }); }); ``` The div `#myDiv` starts with a width of `100px`. I also have a CSS rule that sets `display: inline-block;` on `#myDiv`, and it appears that this is contributing to the layout shift as it grows. I tried switching to `display: block;`, but that does not help the situation. Additionally, I ensured that the surrounding elements have a defined width, but the shift continues to happen. I also added a `min-width` to `#myDiv`, and while that seems to help a little, the layout is still not stable during the animation. I've checked the Chrome DevTools and there are no console errors or warnings. Is there a way to animate the width without causing these layout shifts, or is there a better approach to accomplish this? Any insights would be greatly appreciated! How would you solve this? Am I approaching this the right way? Thanks, I really appreciate it!