jQuery .animate() causing layout shift in Bootstrap modal with dynamic content
I'm experiencing an scenario where using jQuery's `.animate()` method to fade in content within a Bootstrap modal causes unexpected layout shifts. I'm using Bootstrap 5.1.3 and jQuery 3.6.0. When I trigger the modal and then animate the content inside, the backdrop appears to shift as the animation progresses, making a poor user experience. Here’s the relevant code snippet: ```javascript $('#myModal').on('show.bs.modal', function () { $('#modalContent').hide().animate({ opacity: 1 }, 500); }); ``` The `#modalContent` div starts with `opacity: 0` and I’m trying to fade it in when the modal is shown. However, the backdrop seems to resize during the animation, which looks jarring. I tried changing the display property from `none` to `block` before animating and also set the modal’s `overflow` to `hidden`, but nothing seems to work. I also checked the styles applied to the modal and content, but couldn't identify anything out of the ordinary. Is there a best practice for animating content within Bootstrap modals without causing layout shifts? What am I missing here?