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

Possible wrong documentation about picture tags #219

Closed
Hecsall opened this issue Apr 3, 2023 · 2 comments
Closed

Possible wrong documentation about picture tags #219

Hecsall opened this issue Apr 3, 2023 · 2 comments
Labels

Comments

@Hecsall
Copy link

Hecsall commented Apr 3, 2023

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

<div class="jarallax">
    <!-- class jarallax-img here does not work well -->
    <picture class="jarallax-img">
      <source srcset="https://placehold.co/700x300" media="(max-width: 640px)" />
      <source srcset="https://placehold.co/1920x600" media="(max-width: 1280px)" />
      <img src="https://placehold.co/1920x600" alt="Image"/>
    </picture>
    Some text                  
</div>
  
<div class="jarallax">
    <picture>
      <source srcset="https://placehold.co/700x300" media="(max-width: 640px)" />
      <source srcset="https://placehold.co/1920x600" media="(max-width: 1280px)" />
      <!-- class jarallax-img here works as expected -->
      <img src="https://placehold.co/1920x600" alt="Image" class="jarallax-img"/>
    </picture>
    Some text                  
</div>
@Hecsall
Copy link
Author

Hecsall commented Apr 4, 2023

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.

The readme writes:

.jarallax {
  position: relative;
  z-index: 0;
}
.jarallax > .jarallax-img {
  position: absolute;
  object-fit: cover;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
}

You can include it from /dist/jarallax.css.

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:

.jarallax-img img {
    position: absolute;
    object-fit: cover;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
}

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.

@nk-o nk-o added the bug label Apr 14, 2023
@laryn
Copy link

laryn commented Aug 21, 2023

Confirmed!

@nk-o nk-o closed this as completed in e907ef8 Aug 29, 2023
nk-o added a commit that referenced this issue Aug 29, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

3 participants