Images do not get opacity fade in out in IE11 and Edge

[rluiten]

It is not clear to me if this is limitation of Edge/IE11 or something that can be address by some extra styling tweaks. I am looking for more information.

Example of problem visit demo url at https://fritz-c.github.io/react-image-lightbox/

In Chrome and Firefox the image fades up with the overlay fade up, also fades down with close.

In IE11 and Edge here the image appears immediately and the overlay fades up, on close the overlay fades down with out image fading then image vanishes when overlay fade finishes.

I thought I might disable the animation of the opacity by reducing the animationDuration to 0 as a temporary work around to make IE11/Edge to not fade opacity when image does not fade but that also affects the animation of sliding images and I like the sliding.

By the way so far liking your component nice simple API.

[fritz-c]

I don't have a Windows dev environment to confirm and fix this. Could anyone lend me a hand? I'm assuming it's some browser quirk with transform / opacity.

[RickeyWard]

The issue is that the images are in ril-inner ril__inner that is position:absolute; and the animation is on ril-outer ril__outer which is statically positioned. If you add position: relative to ril-outer ril__outer the images will fade out correctly.

I can easily fix it in the inspector, but I haven't had time to figure out how to fix it in the source.