Zooming in Safari is broken

[claviska]

Somewhere along the way, we broke zooming in Safari. As shown in the video, the text used to scale correctly (and still does in Shoelace) but, in Web Awesome, the text somehow stays the same size at all levels.

CleanShot.2025-03-12.at.12.18.05.mp4

[claviska]

I've tracked the root cause of this down to typography.css, specifically the font scaling stuff:

  /* The default type scale is roughly based on the Major Second scale (x1.125),
   * with each value rounded to the nearest whole pixel based on a 16px root font size.
   * For larger font sizes, every other step on the scale is skipped in order to maximize variation.
   * A multiplier is provided to uniformly increase or decrease all font sizes. */
  --wa-font-size-scale: 1;
  --wa-font-size-2xs: calc(0.6875rem * var(--wa-font-size-scale)); /* 11px */
  --wa-font-size-xs: calc(0.75rem * var(--wa-font-size-scale)); /* 12px */
  --wa-font-size-s: calc(0.875rem * var(--wa-font-size-scale)); /* 14px */
  --wa-font-size-m: calc(1rem * var(--wa-font-size-scale)); /* 16px */
  --wa-font-size-l: calc(1.25rem * var(--wa-font-size-scale)); /* 20px */
  --wa-font-size-xl: calc(1.625rem * var(--wa-font-size-scale)); /* 26px */
  --wa-font-size-2xl: calc(2rem * var(--wa-font-size-scale)); /* 32px */
  --wa-font-size-3xl: calc(2.5625rem * var(--wa-font-size-scale)); /* 41px */
  --wa-font-size-4xl: calc(3.25rem * var(--wa-font-size-scale)); /* 52px */

Setting --wa-font-size-scale: 1 to a pixel or em value solves it but alters the scale. This seems to be a bug in how Safari handles unitless conversions.

Any thoughts on this one, @lindsaym-fa?

[lindsaym-fa]

Well, that's obnoxious. 🫠 No immediate ideas, but I'll give this some thought.

What really baffles me is that one value in a multiplication calculation shouldn't have a unit:

Current implementations require that, when using the * and / operators, one of the operands must be unitless.
(https://developer.mozilla.org/en-US/docs/Web/CSS/calc#input_considerations)