jaculabilis/danbooru
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

uploads: fix stretched images on Safari.

Browse Source 
Fix images on the upload page appearing stretched (having the incorrect aspect ratio) when the image
is enlarged on Safari.

The fix is to set `aspect-ratio` and `height: intrinsic` to ensure the image is the right size. I
have no idea how this works or why it's necessary on Safari.

Fixes https://danbooru.donmai.us/forum_posts/227099.
This commit is contained in:
evazion
2022-12-06 02:08:01 -06:00
parent 7efd5d6db3
commit 697691589e
3 changed files with 20 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
app/components/media_asset_component/media_asset_component.scss
View File

@@ -34,8 +34,22 @@
}
}
.media-asset-image {
user-select: none;
width: auto;
height: auto;
max-width: 100%;
max-height: inherit;
}
&.media-asset-container-fit-height {
max-height: calc(100vh - var(--header-visible-height));
justify-content: center;
.media-asset-component {
aspect-ratio: var(--media-asset-width) / var(--media-asset-height);
height: max-content;
height: intrinsic; // XXX Safari-only hack to make images correct height on upload page. I have no idea how this works.
}
}
}