jQuery .animate() optimization guide properly on images with CSS transforms - unexpected flickering guide
I'm working on a personal project and I'm working with an scenario with jQuery's `.animate()` method when trying to animate the width of an image that also has a CSS transform applied to it. I'm using jQuery version 3.6.0 and have the following code: ```javascript $('.my-image').css({ 'transform': 'scale(1.2)', 'width': '300px' }); $('.animate-btn').on('click', function() { $('.my-image').animate({ width: '500px' }, 500); }); ``` The question arises when I click the button to animate the width of the image. Instead of smoothly expanding from 300px to 500px, the image flickers during the animation, making it look very unprofessional. I've tried using `overflow: hidden` on the parent container and ensuring that the image is set to `display: block`, but the flickering continues. I've also checked for any conflicting CSS that could be affecting the animation, but it seems like the only scenario is the combination of jQuery animations with the CSS transform. When I remove the `scale(1.2)` transform, the animation works fine without any flickering. Is there a known scenario with jQuery and CSS transforms that could be causing this behavior? How can I achieve a smooth width animation while maintaining the CSS scale effect? Any tips or tricks would be greatly appreciated! Could someone point me to the right documentation?