ember/continuwuity
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 1

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
No known key found for this signature in database
GPG key ID: 8705A2A3EBF77BD2
2 changed files with 7 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
packages/website/src/lib/htmlComponents/img.svelte
View file

@ -22,6 +22,7 @@
height={thumb?.originalHeight}
style:background-image={loaded ? "none" : `url('${thumb?.thumbSrc}')`}
on:load={() => loaded = true}
style:--aspect-ratio={thumb?.originalWidth / thumb?.originalHeight}
/>
{#if title}
<figcaption>{title}</figcaption>
@ -42,12 +43,12 @@
<style>
img {
max-height: 60vh;
height: 100%;
background-size: cover;
background-repeat: no-repeat;
display: block;
margin-inline: auto;
max-width: calc(min(100%, 60vh * var(--aspect-ratio)));
}
figure {
text-align: center;

7
packages/website/src/lib/styles.css
View file

@ -115,10 +115,13 @@ body {
iframe,
img,
svg {
max-block-size: 100%;
/* max-block-size: 100%;
max-inline-size: 100%;
inline-size: auto;
block-size: auto;
block-size: auto; */
max-width: 100%;
height: auto;
width: 100%;
display: block;
}