Communities

Writing
Writing
Codidact Meta
Codidact Meta
The Great Outdoors
The Great Outdoors
Photography & Video
Photography & Video
Scientific Speculation
Scientific Speculation
Cooking
Cooking
Electrical Engineering
Electrical Engineering
Judaism
Judaism
Languages & Linguistics
Languages & Linguistics
Software Development
Software Development
Mathematics
Mathematics
Christianity
Christianity
Code Golf
Code Golf
Music
Music
Physics
Physics
Linux Systems
Linux Systems
Power Users
Power Users
Tabletop RPGs
Tabletop RPGs
Community Proposals
Community Proposals
tag:snake search within a tag
answers:0 unanswered questions
user:xxxx search by author id
score:0.5 posts with 0.5+ score
"snake oil" exact phrase
votes:4 posts with 4+ votes
created:<1w created < 1 week ago
post_type:xxxx type of post
Search help
Notifications
Mark all as read See all your notifications »
Q&A

Welcome to Codidact Meta!

Codidact Meta is the meta-discussion site for the Codidact community network and the Codidact software. Whether you have bug reports or feature requests, support questions or rule discussions that touch the whole network – this is the site for you.

Post History

71%
+3 −0
Q&A Images are stretched, not scaled, on narrow browsers

Oh yeah right, that bug, since Art just put a status-completed tag on it, I could also take my time and reply with what the issue is, because it's quite interesting (and this is also a good mental ...

posted 4y ago by luap42‭

Answer
#1: Initial revision by user avatar luap42‭ · 2020-09-18T15:55:28Z (about 4 years ago)
Oh yeah right, that bug, since Art just put a status-completed tag on it, I could also take my time and reply with what the issue is, because it's quite interesting (and this is also a good mental note for next time a similiar issue appears).

It turns out, that mobile iOS browsers don't like images being inside of flexbox containers. Most other browsers default the `align-self` property for such images to `flex-start` (or something similiar). This means, that the image will be positioned without at the top of the flex container (or at the reading direction start if it is vertical - for English this is the left side).

*However*, for some reasons, Safari defaults to `stretch`, which, as the name says, causes the image to be stretched to take all the available space. I have no idea, why they are doing it that way. It doesn't seem to be the best solution IMHO for the reason, that it causes the bug we have seen here.

Anyway, the fix is simple, just add an `align-self: flex-start` to the image and gone is the bug. (We can just add this to the general `<img>` selector, because it shouldn't have any other side effects.[^1])

[^1]: This will likely result in an extremely awkward bug, that will cause extreme trouble in a few years. Don't say you weren't warned, future luap42!