fix(artwork rail): change image resize mode to "cover" #11021
Merged
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.
This PR resolves this QA launch-blocking bug:
https://www.notion.so/artsy/Border-around-artwork-rail-images-12acab0764a080e298c1d1ca455895c9
Description
QA uncovered an issue where some images appear to have hairline rules visible on their borders.
(See ⬆️ in the Before column the sides of the first image and the top/bottom of the second image.)
The hairline itself, if you really zoom in there, turns out to be the blurhash showing through because it is not completely covered by the final image! Notice the gradient from the pale green down to the dark blue here:
The root cause appears to be tiny sub-pixel differences between the calculated size of the image component and the actual image source file itself.
For example in the "before" image above, the calculated size is
215 x 215
but the image source file is1100 x 1104
When resized in
contain
mode, the image is shrunk to214.2 x 215
, which leaves a little strip visible on either side.Furthermore this difference is really apparent when the artwork image (contrary to our guidelines!) has a white buffer around it, as these images do (see original).
This QA caught a perfect storm of multiple such images which made the problem very visible.
Solution
If we instead resize this in
cover
mode, the image is scaled down just enough to completely cover the215 x 215
container, and therefore leaves none of the background blurhash showing through. This fix comes at the expense of "throwing away" a minuscule 1-pixel or so line of image data, which is more acceptable than the alternative imo.PR Checklist
To the reviewers 👀
Changelog updates
Changelog updates
Cross-platform user-facing changes
iOS user-facing changes
Android user-facing changes
Dev changes
Need help with something? Have a look at our docs, or get in touch with us.