Open leoj3n opened 5 months ago
I believe the current https://kit.svelte.dev website has an issue when using rem and srcset:
rem
srcset
html { ... font-size: 62.5%; }
<picture> <source srcset="/_app/immutable/assets/svelte-kit-machine.QxzWJJCG.avif 1440w, /_app/immutable/assets/svelte-kit-machine.bRNI6fne.avif 1080w, /_app/immutable/assets/svelte-kit-machine.F02x6KOB.avif 768w, /_app/immutable/assets/svelte-kit-machine.xbq8eY7V.avif 640w" sizes="(min-width: 768px) min(100vw, 108rem), 64rem" type="image/avif"> <source srcset="/_app/immutable/assets/svelte-kit-machine.8mPpps5Z.webp 1440w, /_app/immutable/assets/svelte-kit-machine.fsRU-V14.webp 1080w, /_app/immutable/assets/svelte-kit-machine.MJuQ2NRQ.webp 768w, /_app/immutable/assets/svelte-kit-machine.1ON3IFXZ.webp 640w" sizes="(min-width: 768px) min(100vw, 108rem), 64rem" type="image/webp"> <source srcset="/_app/immutable/assets/svelte-kit-machine._UWkb_B3.png 1440w, /_app/immutable/assets/svelte-kit-machine.Wpp9Ptlg.png 1080w, /_app/immutable/assets/svelte-kit-machine.oSMVCmBL.png 768w, /_app/immutable/assets/svelte-kit-machine.7PYg01mw.png 640w" sizes="(min-width: 768px) min(100vw, 108rem), 64rem" type="image/png"> <img src="/_app/immutable/assets/svelte-kit-machine._UWkb_B3.png" class="hero-image svelte-m2ltu" alt="SvelteKit illustration" width="1440" height="1440"> </picture>
For <img> with DPR 1 and viewport of ~400px:
<img>
> $0.clientWidth 640 > $0.currentSrc "https://kit.svelte.dev/_app/immutable/assets/svelte-kit-machine.bRNI6fne.avif"
The smaller 640w *xbq8eY7V.avif image should be the current source in this case.
640w
*xbq8eY7V.avif
https://kit.svelte.dev
No response
Any modern web browser.
annoyance
https://stackoverflow.com/questions/30653280/how-do-responsive-images-work-with-em-supplied-as-a-length-in-sizes
Perhaps you can keep the html { font-size: 62.5%; } if sizes used calc:
html { font-size: 62.5%; }
sizes
calc
sizes="(min-width: 768px) min(100vw, calc(108rem * .625)), calc(64rem * .625)"
Describe the bug
I believe the current https://kit.svelte.dev website has an issue when using
rem
andsrcset
:For
<img>
with DPR 1 and viewport of ~400px:The smaller
640w
*xbq8eY7V.avif
image should be the current source in this case.Reproduction
https://kit.svelte.dev
Logs
No response
System Info
Severity
annoyance
Additional Information
https://stackoverflow.com/questions/30653280/how-do-responsive-images-work-with-em-supplied-as-a-length-in-sizes