search

zerodevx / svelte-img

High-performance responsive/progressive images for SvelteKit
https://zerodevx.github.io/svelte-img/
ISC License
300 stars 11 forks source link

FxReveal does not work on absolutely positioned images #22

Closed ebrenner-code closed 9 months ago

ebrenner-code commented 11 months ago

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.'

zerodevx commented 11 months ago

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

ebrenner-code commented 11 months ago

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.

zerodevx commented 11 months ago

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

zerodevx commented 9 months ago

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.