Issue
Initially, we were using a black background in gallery but portrait images were displaying horizontally stretched (T248443). In fixing that issue, we learned that the black background is not being displayed correctly on portrait images. This issue is present only on device, the browser shows the correct behavior. After several failed attempts, we've decided to leave the background white only temporarily so as to not hold up the release for this.
What follows is a dump of everything we've learned and gathered so far on this issue.
Notes
The black background adds value to the app experience, it gives the gallery a bit of a special cinema-like feel 📽
The bug is only present when interacting with app on device, the browser works as expected. This makes it a bit trickier to debug. We can’t quite get the behavior on the browser and on the device to reconcile. We have tried a few different things:
- setting a combination of different properties on flex child item img
- using align-self to override the default value [1]
- setting flex [2]
- using flex-basis [3]
- adjusting padding [4]
In all those case we either end up with images still stretched vertically or horizontally, or the white background on landscape or portrait. Could it be some of the flex properties not being supported or recognized on device? The issue is getting the same for both landscape or portrait: what's working one way is at the sacrifice of the other.
Note that the cat article has a good gallery to test this bug with because it contains both landscape and portrait images, as well as one svg for which we need the white background on image for (more about that in T236302). Booting up the WebIDE (for on-device debugging) we can further confirm that behavior of the img size overlapping parent divs, here with a red border to visualize debugging:
We also tried something perhaps a bit more out there [5] with an extra parent div, and this was looking okay(ish?) on device but broken on browser. This I'm leaving in sample branch T248443-images-jio2-gallery-img-idea.
Solution ideas
- One possible solution the solution is to constrain width OR height based on the aspect ratio of the image vs. the aspect ratio of the space available
- Is there a way to know beforehand via the respective API call if the image is portrait or landscape? With that info, we could perhaps set the flex properties dynamically
- if for some reason we had to move away from flex in gallery thumbnail, we could simulate what's being done on desktop Wikipedia using display: table instead
Links
[1] - https://stackoverflow.com/questions/37609642/why-does-flexbox-stretch-my-image-rather-than-retaining-aspect-ratio
[2] - https://stackoverflow.com/questions/29467660/how-to-stretch-children-to-fill-cross-axis
[3] - https://stackoverflow.com/questions/34352140/what-are-the-differences-between-flex-basis-and-width
[4] - https://stackoverflow.com/questions/44009015/use-flexbox-and-maintain-a-11-aspect-ratio-even-though-content-is-sized-differe
[5] - https://stackoverflow.com/questions/30330845/flexbox-image-scale-to-height-and-keep-aspect-ratio
