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

[redesign] Img does not load new src after zooming #211

Closed
greglobinski opened this issue Jan 4, 2019 · 1 comment · Fixed by #250
Closed

[redesign] Img does not load new src after zooming #211

greglobinski opened this issue Jan 4, 2019 · 1 comment · Fixed by #250
Assignees

Comments

@greglobinski
Copy link
Contributor

Fixing for #201

I missed this because some product images really do no not have high-res sources, so I thought it was the source of this issue, but there is issue with zooming pictures.

in ProductImagaseBrowser https://github.com/gatsbyjs/store.gatsbyjs.org/blob/next/src/components/ProductPage/ProductImagesBrowser.js

there is code:

<ImageBox
            onClick={this.toggleZoomRatio}
            href={fluid.src}
            superZoom={superZoom}
            width={imageBoxHeight}
            innerRef={image => {
              this.imageBox = image;
            }}
          >
            <Image fluid={fluid} />
</ImageBox>

we have gatsby Image component inside the box ImageBox. When user triggers superZoom

@media (min-width: ${breakpoints.desktop}px) {
 	...

    .gatsby-image-wrapper {
      width: ${props => (props.superZoom ? '100%' : '100vh')};
    }
  }

the image container element is scaled to be width: 100%, that makes the img tag significantly bigger so the src of the img should be upgraded to the one of the higher resolutions available in srcset but it's not. The result is that all pictures in superZoom are oversized for example 900px width source is overstretched to 1300px.

I have no idea, maybe we should force rerendering of Image component after we resize it?

@greglobinski
Copy link
Contributor Author

greglobinski commented Jan 4, 2019

To test check this product https://next.store.gatsbyjs.org/product/gatsby-trucker-hat it has variants up to 3000px in srcset so, there should be sharp image in superZoom mode, but there is not.

jlengstorf pushed a commit that referenced this issue Feb 8, 2019
I found an issue with gatsby-image on the store site, I created this PR gatsbyjs/gatsby#11303, so the issue has been fixed in the latest version.

close #211
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

Successfully merging a pull request may close this issue.

3 participants