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

10
app/components/media_asset_component/media_asset_component.html.erb
View File

@@ -1,4 +1,4 @@
<div class="media-asset-container media-asset-container-fit-height flex flex-col <%= outer_classes %>" data-dynamic-height="<%= dynamic_height %>" style="--header-visible-height: 0px"> <div class="media-asset-container media-asset-container-fit-height flex flex-col <%= outer_classes %>" data-dynamic-height="<%= dynamic_height %>" style="--header-visible-height: 0px; --media-asset-width: <%= image_width %>; --media-asset-height: <%= image_height %>;">
<%= header %> <%= header %>
<div class="media-asset-component relative max-h-inherit overflow-hidden <%= inner_classes %>"> <div class="media-asset-component relative max-h-inherit overflow-hidden <%= inner_classes %>">
@@ -15,13 +15,13 @@
<% elsif !media_asset.active? || !policy(media_asset).can_see_image? %> <% elsif !media_asset.active? || !policy(media_asset).can_see_image? %>
<p>Image unavailable.</p> <p>Image unavailable.</p>
<% elsif is_image? %> <% elsif is_image? %>
<%= tag.img src: variant(:original).file_url, width: image_width, height: image_height, draggable: "false", class: "media-asset-image max-h-inherit max-w-full h-full w-auto select-none" -%> <%= tag.img src: variant(:original).file_url, width: image_width, height: image_height, draggable: "false", class: "media-asset-image" -%>
<% elsif is_video? %> <% elsif is_video? %>
<%= tag.video src: variant(:original).file_url, width: image_width, height: image_height, autoplay: true, loop: true, controls: "controls", class: "media-asset-image max-h-inherit max-w-full h-full w-auto select-none" %> <%= tag.video src: variant(:original).file_url, width: image_width, height: image_height, autoplay: true, loop: true, controls: "controls", class: "media-asset-image" %>
<% elsif is_ugoira? %> <% elsif is_ugoira? %>
<%= tag.video src: variant(:sample).file_url, width: image_width, height: image_height, autoplay: true, loop: true, controls: "controls", class: "media-asset-image max-h-inherit max-w-full h-full w-auto select-none" %> <%= tag.video src: variant(:sample).file_url, width: image_width, height: image_height, autoplay: true, loop: true, controls: "controls", class: "media-asset-image" %>
<% elsif is_flash? %> <% elsif is_flash? %>
<%= tag.div "data-swf": variant(:original).file_url, class: "media-asset-image ruffle-container max-h-inherit max-w-full h-full w-auto select-none" %> <%= tag.div "data-swf": variant(:original).file_url, class: "media-asset-image ruffle-container" %>
<% end %> <% end %>
</div> </div>

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 { &.media-asset-container-fit-height {
max-height: calc(100vh - var(--header-visible-height)); max-height: calc(100vh - var(--header-visible-height));
justify-content: center; 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.
}
} }
} }

2
app/views/media_assets/show.html.erb
View File

@@ -99,7 +99,7 @@
<% end %> <% end %>
</div> </div>
<div class="media-asset-sidebar md:w-360px"> <div class="media-asset-sidebar flex-none md:w-360px">
<% if @media_asset.ai_tags.present? %> <% if @media_asset.ai_tags.present? %>
<div> <div>
<h3>Tags</h3> <h3>Tags</h3>