Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Source tag with max-width media query doesn't include images into screenshot #79

Open
bybash opened this issue Feb 7, 2024 · 0 comments

Comments

@bybash
Copy link

bybash commented Feb 7, 2024

Hi,

Thanks for this great library. While using it, we realized that if you have images inside a picture tag with a source definition of max-width media, the library doesn't include it in the screenshot or give any error.

This example is not working.

<picture>
       <source media="(max-width:768px)" srcset="https://prirodnydom.futur.sk/wp-content/uploads/2024/02/drevodom-havranske-m.jpg" type="image/jpeg" />
       <img width="1920" height="1027" src="https://prirodnydom.futur.sk/wp-content/uploads/2024/02/prirodnydom-hero-havranske-132A4596-HDR-Edit-Edit-Edit.jpg" alt="" loading="eager" decoding="async" fetchpriority="high" srcset="https://prirodnydom.futur.sk/wp-content/uploads/2024/02/prirodnydom-hero-havranske-132A4596-HDR-Edit-Edit-Edit.jpg 1920w, https://prirodnydom.futur.sk/wp-content/uploads/2024/02/prirodnydom-hero-havranske-132A4596-HDR-Edit-Edit-Edit-300x160.jpg 300w, https://prirodnydom.futur.sk/wp-content/uploads/2024/02/prirodnydom-hero-havranske-132A4596-HDR-Edit-Edit-Edit-1024x548.jpg 1024w, https://prirodnydom.futur.sk/wp-content/uploads/2024/02/prirodnydom-hero-havranske-132A4596-HDR-Edit-Edit-Edit-768x411.jpg 768w, https://prirodnydom.futur.sk/wp-content/uploads/2024/02/prirodnydom-hero-havranske-132A4596-HDR-Edit-Edit-Edit-1536x822.jpg 1536w" sizes="(max-width: 1920px) 100vw, 1920px" />
</picture>

This example is working with min-width media definition.

<picture>
       <source media="(min-width:769px)" srcset="https://prirodnydom.futur.sk/wp-content/uploads/2024/02/drevodom-havranske-m.jpg" type="image/jpeg" />
       <img width="1920" height="1027" src="https://prirodnydom.futur.sk/wp-content/uploads/2024/02/prirodnydom-hero-havranske-132A4596-HDR-Edit-Edit-Edit.jpg" alt="" loading="eager" decoding="async" fetchpriority="high" srcset="https://prirodnydom.futur.sk/wp-content/uploads/2024/02/prirodnydom-hero-havranske-132A4596-HDR-Edit-Edit-Edit.jpg 1920w, https://prirodnydom.futur.sk/wp-content/uploads/2024/02/prirodnydom-hero-havranske-132A4596-HDR-Edit-Edit-Edit-300x160.jpg 300w, https://prirodnydom.futur.sk/wp-content/uploads/2024/02/prirodnydom-hero-havranske-132A4596-HDR-Edit-Edit-Edit-1024x548.jpg 1024w, https://prirodnydom.futur.sk/wp-content/uploads/2024/02/prirodnydom-hero-havranske-132A4596-HDR-Edit-Edit-Edit-768x411.jpg 768w, https://prirodnydom.futur.sk/wp-content/uploads/2024/02/prirodnydom-hero-havranske-132A4596-HDR-Edit-Edit-Edit-1536x822.jpg 1536w" sizes="(max-width: 1920px) 100vw, 1920px" />
</picture>

I didn't have a chance to dig inside the code to find the issue; I believe you can understand the issue quicker than I can.
It happens on the 4.4.37 and 4.4.38 versions; I didn't test the lower versions.

Kind regards,
Hakan

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant