Fix stretched product modal images on Safari #131
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
LucasLacerdaUX
changed the title
ludoboludo
approved these changes
Jul 6, 2021
There was a problem hiding this comment.
Looks good to me. I didn't run into any other issue. Tested on iPhone - safari, iPad - safari and Desktop - chrome.
One thing I noticed while testing, it's not pausing the video playing if you click on an image. Not related to this issue tho 😅 (video).
tyleralsbury
approved these changes
Jul 7, 2021
bertiful
approved these changes
Jul 7, 2021
phapsidesGT
pushed a commit
to Gravytrain-UK/gt-shopify-dawn-theme
that referenced
this pull request
Sep 3, 2024
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Why are these changes introduced?
When viewing large images in the product modal on Safari, the images would get vertically distorted.
Fixes #65.
This PR also removes leftover code for
thumbnailscomponent - this is no longer used in the context of the product page.Before & After
Before
After
What approach did you take?
Unlike other modern browsers, Safari will stretch images to its natural height when they're contained in a
flexwrapper. This StackOverflow thread provides more details on the issue. Unfortunately, the suggested fix in this thread will not completely solve our issues because we need to account for the multiple types of media inside the modal.display: flexandflex-directionfromproduct-modal__content, responsible for causing this issue.display:flexto the parent element and limited it's height to100vh.Demo links
Checklist
Testing instructions