Mirrors/continuwuity
1
0
Fork 0
mirror of https://forgejo.ellis.link/continuwuation/continuwuity.git synced 2026-05-26 20:49:55 +00:00
Code Issues Packages Projects Releases Wiki Activity

Work around Chrome image bug causing CLS

Browse Source
This commit is contained in:
Jade Ellis
2024-09-02 19:32:02 +01:00
parent c6800a1288
commit 62cf9655b0
2 changed files with 7 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/website/src/lib/htmlComponents/img.svelte
+2 -1
View File
@@ -22,6 +22,7 @@
height={thumb?.originalHeight} height={thumb?.originalHeight}
style:background-image={loaded ? "none" : `url('${thumb?.thumbSrc}')`} style:background-image={loaded ? "none" : `url('${thumb?.thumbSrc}')`}
on:load={() => loaded = true} on:load={() => loaded = true}
style:--aspect-ratio={thumb?.originalWidth / thumb?.originalHeight}
/> />
{#if title} {#if title}
<figcaption>{title}</figcaption> <figcaption>{title}</figcaption>
@@ -42,12 +43,12 @@
<style> <style>
img { img {
max-height: 60vh;
height: 100%; height: 100%;
background-size: cover; background-size: cover;
background-repeat: no-repeat; background-repeat: no-repeat;
display: block; display: block;
margin-inline: auto; margin-inline: auto;
max-width: calc(min(100%, 60vh * var(--aspect-ratio)));
} }
figure { figure {
text-align: center; text-align: center;
packages/website/src/lib/styles.css
+5 -2
View File
@@ -115,10 +115,13 @@ body {
iframe, iframe,
img, img,
svg { svg {
max-block-size: 100%; /* max-block-size: 100%;
max-inline-size: 100%; max-inline-size: 100%;
inline-size: auto; inline-size: auto;
block-size: auto; block-size: auto; */
max-width: 100%;
height: auto;
width: 100%;
display: block; display: block;
} }