zerodevx / svelte-img

High-performance responsive/progressive images for SvelteKit

Home Page:https://zerodevx.github.io/svelte-img/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

FxReveal does not work on absolutely positioned images

ebrenner-code opened this issue · comments

I have a couple images that are positioned absolutely to use as backgrounds or for complex layouts. The fade in feature via FxReveal is not working and I can confirm it is only when these images have their position set to 'absolute.'

Will it help if you wrap the image with a <div> and setting absolute to the wrapper instead?

I can confirm, this does solve the original problem, but creates a new one. In my case, the reason for using an absolutely positioned image is to simulate the image as a background. By placing it inside an absolutely positioned div, i need it to fill that parent, but this package add a wrapper element between the parent and the image. height:100% no longer fills the entire parent. My solution is to set .wrap.reveal to display: contents. Perhaps this could be added to the default package css without side effects for most users. It would still be nice to be able to simply apply this effect to images with absolute positions, but I don't know what's involved in that.

Sounds like a good idea. Happy to take a PR if you're willing, else I'd add it in the next release.

Marking this as won't fix. Realised display: contents has its own set of problems as well. As long as the image is explicitly sized, the current setup should work.

Closing for now, feel free to reopen for discussion.