jQuery .fadeOut() causing layout shift unexpectedly when used with CSS Grid in Firefox 93
I'm testing a new approach and I'm trying to implement I'm not sure how to approach I'm following best practices but I've searched everywhere and can't find a clear answer....... I'm experiencing an issue where using jQuery's `.fadeOut()` method on elements within a CSS Grid layout is causing unexpected layout shifts in Firefox 93. The intention is to smoothly hide a grid item when a button is clicked, but instead of simply fading out, the surrounding grid items shift to fill the space left behind, which is not the desired effect. Here’s a simplified version of my HTML and jQuery code: ```html <div class="grid-container"> <div class="grid-item">Item 1</div> <div class="grid-item">Item 2</div> <button id="remove-item">Remove Item 1</button> </div> ``` ```javascript $(document).ready(function() { $('#remove-item').on('click', function() { $('.grid-item').first().fadeOut(300); }); }); ``` I’ve tried wrapping the `.fadeOut()` call in a `setTimeout()` to see if any asynchronous timing issues were at play, but that didn't help. The CSS I’m using for the grid looks like this: ```css .grid-container { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; } .grid-item { background-color: lightblue; padding: 20px; text-align: center; } ``` After running this, instead of the item just fading out, the other grid items move over immediately, creating a jarring experience. This behavior seems exclusive to Firefox as it works as intended in Chrome and Edge. I’ve tried to look into the `visibility` property as an alternative, but I would prefer to keep the fade out effect. Is there a way to prevent the layout shift while still using `.fadeOut()` effectively in Firefox? For context: I'm using Javascript on Ubuntu. My development environment is Windows 11. For reference, this is a production web app. What are your experiences with this? I've been using Javascript for about a year now. I appreciate any insights! I've been using Javascript for about a year now. Thanks for any help you can provide! Thanks for your help in advance!