[Product] Fix transparent image zoom #2280
Conversation
| @@ -1158,6 +1158,10 @@ a.product__text { | |||
| border-radius: calc(var(--media-radius) - var(--media-border-width)); | |||
| } | |||
|
|
|||
| .image-magnify-full-size + img { | |||
| opacity: 0; | |||
There was a problem hiding this comment.
I think there's a transition in scope for opacity here. https://screenshot.click/02-22-zhx81-93cmp.mp4 We could override that or probably use visibility instead
There was a problem hiding this comment.
Yeah coming from here, I was noticing the same:
Screenshot
There was a problem hiding this comment.
Just fixed it by adding transition: none to .media>.image-magnify-hover.
- I opted for this instead of
visibility:hiddenbecausevisibilityremoves it from the accessibility tree. - Applied
transition:noneto.media>.image-magnify-hoverinstead of.image-magnify-full-size + imgbecause in the latter, only theintransition is impacted. Once the class is removed, theoutstill shows up.
There was a problem hiding this comment.
assets/section-main-product.css
Outdated
| @@ -1158,6 +1158,11 @@ a.product__text { | |||
| border-radius: calc(var(--media-radius) - var(--media-border-width)); | |||
| } | |||
|
|
|||
| .image-magnify-full-size + img { | |||
| opacity: 0; | |||
| transition: none; | |||
There was a problem hiding this comment.
For the images that dont have the transparent background, theres a bit of a flash now 🤔
thoughts?
There was a problem hiding this comment.
Oof I think that flash is a sign we were counting on the image as a placeholder while the full size loads https://screenshot.click/02-40-rfvqq-80apq.mp4
Here's a comparison for original behavior where we didn't hide the image https://screenshot.click/02-56-j7j37-1lz8h.mp4
There was a problem hiding this comment.
This is more apparent if you throttle the network
There was a problem hiding this comment.
I did see the flash but I don't see it anymore 🤔
There was a problem hiding this comment.
Once the full size image loads, it's cached so there's no delay to reveal the whitespace behind. Meaning slower connections would see a longer flash. Lucas' other changes have eliminated the transition issue well though.
|
Similar to other comments, but if the full-size image (zoomed) is not cached there is now a blank screen while it's loading: Screen.Recording.2023-02-02.at.4.39.31.PM.mov |
There was a problem hiding this comment.
Thank you Lucas!
Works as expected except I notice something unrelated:
- Product cards adds a background to PNG images. (Video reference) I'll create a new issue for this!
There was a problem hiding this comment.
Noticing some weirdness with the load listener. It's a little inconsistent, but consistent enough to be not ideal. Recording with throttled network https://screenshot.click/02-07-tdb7m-1ynl6.mp4
|
@lucas let's close this one - I opened a new issue for it that @metamoni is going to pick up https://github.com/orgs/Shopify/projects/4690/views/47?pane=issue&itemId=19635258 |
PR Summary:
Why are these changes introduced?
Transparent images are no longer duplicated when zooming in with the cursor.
Fixes #2278.
What approach did you take?
Added opacity 0 to the product image.
Testing steps/scenarios
Demo links