Modal incompatible with native lazy loading

[Wardojack]

I'm developing a UI without using JS, hence my use of this library. My page was taking a long time to load due to an abundance of high-res images, so I decided to instead display scaled down thumbnails. I wanted to have the thumbnail trigger a modal which shows the full size image, but without having to download all the images at once. I added loading="lazy" to my images, but as the modal is only hidden by visibility="hidden" and still exists in the document flow, the browser still considers it to be in the viewport and loads all my images at once.

I fixed this issue by adding display="none" to [data-modal]'s default state, and display="flex" under the [data-modal]:target selector.

I assume that this scenario has just not been considered because, let's be real, who is actually this averse to using a little bit of JS in their project?

Is there another reason that visibility was used, or am I on the money here?

[zetareticoli]

Hi @Wardojack , thank you for your feedback.

You're absolutely right about why visibility is used in this case. Using display: none doesn't allow for transitions or animations when showing and hiding elements, while visibility: hidden does.

When you want to animate the appearance/disappearance of a modal, you need the element to remain in the document flow during the transition. This is why visibility: hidden is often preferred in these scenarios - it keeps the element in the DOM layout while making it invisible, allowing for smooth animations.

Your solution of combining display: none by default and display: flex for the target state is perfect for optimizing image loading. The trade-off is that you won't be able to animate the transition between these states since display is a binary property that can't be transitioned.

For cases where both performance and animations are needed, a common approach is using a combination of techniques - display: none for initial state, then switching to visibility: hidden with opacity animations when interaction begins.

[niutech]

Since 2024 it's possible to transition from display: none, see this article.

[zetareticoli]

Thank you @niutech, as reported by Can I Use there's still a partial support on Firefox. But I definitely explore this solution.