search

francoischalifour / medium-zoom

🔎🖼 A JavaScript library for zooming images like Medium
https://medium-zoom.francoischalifour.com
MIT License
3.58k stars 160 forks source link

zoomed image ignores prefers-color-scheme in <source> #171

Open ayushnix opened 3 years ago

ayushnix commented 3 years ago

Bug description

When using <picture> and <source> elements with the prefers-color-scheme media query, medium-zoom ignores them when image is zoomed in and it falls back to the <img> element inside <picture>.

How to reproduce

The following code results in medium zoom using the initial-commits-light.png when zoomed in regardless of the browser theme. Even if the dark version of the image is displayed, zooming in shows the light version.

<picture>
<source srcset="/initial-commits-light.png" media="(prefers-color-scheme: light)" data-zoomable="">
<source srcset="/initial-commits-dark.png" media="(prefers-color-scheme: dark)" data-zoomable="">
<img src="/wiki/images/initial-commits-light.png" data-zoomable="">
</picture>

Expected behavior

The zoomed image should be shown according to the browser theme.

Reproducible example

I'm not sure why but you might need to reload the embedded browser to make the image zoomable.

Link to the bug reproduction

Environment