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.

Sign up for GitHub

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

Jump to bottom

Images invisible with Parvus 2.3.3 using data-srcset & empty cache #49

Closed
adamjohnson opened this issue Jul 12, 2023 · 1 comment · Fixed by #48
Closed

Images invisible with Parvus 2.3.3 using data-srcset & empty cache #49

adamjohnson opened this issue Jul 12, 2023 · 1 comment · Fixed by #48
Labels
type: bug Something isn't working
Milestone
2.4.0

Comments

@adamjohnson
Copy link
Contributor

Reduced test case

I created a reduced test case that showcases this behavior on CodePen:

Steps to reproduce the issue

Different Browsers produce different results.

Chrome & Edge:

  1. Open a new tab. Be sure your cache is disabled (Devtools > Network > Disable Cache).
    • Bug will not be visible on repeat visits / cached images.
  2. Visit the debug mode or full page view from above.
  3. Click an image to open the Lightbox.
  4. Click the "X" to close the image / Lightbox.
  5. Click the same image to open it again.

Safari:

  1. Open a new tab. Be sure your cache is disabled (Devtools > Network > Disable Cache).
    • Bug will not be visible on repeat visits / cached images.
  2. Visit the debug mode or full page view from above.
  3. Click an image to open the Lightbox.

Results

Chrome & Edge:

The image is invisible when you open it the second time.

Safari:

The image is invisible in the Lightbox upon first click / fresh cache. The image does show if you click to open it again.

It appears the image is indeed in the DOM when it's "invisible"; however, inline styles are setting the width and height to 0, which causes the image to be invisible.

Screenshot of Parvus in DevTools with width and height attributes set to zero

Expected results

The image(s) should display when you click to open it.

Environment

  1. OSX Ventura 13.4.1
  2. Chrome & Edge 114, Safari 16.5.1. Seems to work in Firefox!
@deoostfrees
Copy link
Owner

Thank you, @adamjohnson. I was able to reproduce it.

@deoostfrees deoostfrees added the type: bug Something isn't working label Jul 13, 2023
deoostfrees added a commit that referenced this issue Jul 13, 2023
@deoostfrees
[BUGFIX] Load the srcset before the src, add sizes
2b1860e 
Related: #49
@deoostfrees deoostfrees linked a pull request Jul 13, 2023 that will close this issue
2.4.0 #48
Merged
@deoostfrees deoostfrees added this to the 2.4.0 milestone Jul 13, 2023
@adamjohnson adamjohnson mentioned this issue Jul 14, 2023
Closed
deoostfrees added a commit that referenced this issue Jul 20, 2023
@deoostfrees
[BUGFIX] Load the srcset before the src, add sizes
5d1f232 
Related: #49
adamjohnson added a commit to wvuweb/wvu-design-system-v2 that referenced this issue Jul 28, 2023
@adamjohnson
Update and lock Parvus gallery to v2.4.x.
1bee49f 
This fixes a bug introduced in Parvus 2.3.x where images sometimes wouldn't display on a fresh cache:

deoostfrees/Parvus#49

Locking ensures no future releases will break things or cause mismatched dependencies between themes.
@adamjohnson adamjohnson mentioned this issue Jul 28, 2023
Merged
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
type: bug Something isn't working
Projects
None yet
Milestone
2.4.0
Development

Successfully merging a pull request may close this issue.

2.4.0 deoostfrees/Parvus
2 participants
@adamjohnson @deoostfrees