You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
I think the documentation about <picture> tags is slightly wrong, trying the example code from the readme leaves the image with a white area (the body background) on the side.
Probably the correct usage, correct me if I'm wrong, is with the jarallax-img class on the inner <img> tag and not on the <picture> tag.
<divclass="jarallax"><!-- class jarallax-img here does not work well --><pictureclass="jarallax-img"><sourcesrcset="https://placehold.co/700x300" media="(max-width: 640px)" />
<sourcesrcset="https://placehold.co/1920x600" media="(max-width: 1280px)" />
<imgsrc="https://placehold.co/1920x600" alt="Image"/>
</picture>
Some text
</div><divclass="jarallax"><picture><sourcesrcset="https://placehold.co/700x300" media="(max-width: 640px)" />
<sourcesrcset="https://placehold.co/1920x600" media="(max-width: 1280px)" />
<!-- class jarallax-img here works as expected --><imgsrc="https://placehold.co/1920x600" alt="Image" class="jarallax-img"/>
</picture>
Some text
</div>
The text was updated successfully, but these errors were encountered:
My bad, with the class on the <picture> tag the image was too high up, and after further testing, I noticed a piece of CSS that was not documented on the readme.
So I just copy-pasted that block of CSS guessing that it was all it takes to use the picture tag, then I found this example https://codepen.io/_nK/pen/VwxpPoz where there is an added selector for the <img> tag that fixes some styling:
Without that block, with some image sizes, you could find white space inside jarallax below the image.
See the issue inside this Codepen https://codepen.io/Hecsa/pen/zYmOxBg, when the 1920x600 image is visible, scrolling up and down reveals a white area between the image and the red block.
Issue description:
I think the documentation about
<picture>
tags is slightly wrong, trying the example code from the readme leaves the image with a white area (the body background) on the side.Probably the correct usage, correct me if I'm wrong, is with the
jarallax-img
class on the inner<img>
tag and not on the<picture>
tag.Version used:
Latest npm release
Code to reproduce the issue
You can see an example here https://codepen.io/Hecsa/pen/WNgVEby
The text was updated successfully, but these errors were encountered: