Website: rem with font-size: 62.5% breaks srcset

[leoj3n]

Describe the bug

I believe the current https://kit.svelte.dev website has an issue when using rem and 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:

> $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.

Reproduction

https://kit.svelte.dev

Logs

No response

System Info

Any modern web browser.

Severity

annoyance

Additional Information

https://stackoverflow.com/questions/30653280/how-do-responsive-images-work-with-em-supplied-as-a-length-in-sizes

[leoj3n]

Perhaps you can keep the html { font-size: 62.5%; } if sizes used calc:

sizes="(min-width: 768px) min(100vw, calc(108rem * .625)), calc(64rem * .625)"

[teemingc]

closing this as stale since the new svelte.dev omnisite is up