Icons do not scale when zooming in Safari

[mrosvik]

There seems to be a bug where icons do not scale properly when zoom is applied in Safari.

Steps to reproduce:

• Open Safari.
• Go to the Link or Button component in Storybook and the example that has icon.
• Zoom in on the page.
• Observe that the text scales, but the icon does not.

[oddvernes]

Noticing that aksel have solved this specifically for button by adding a span around the svg and setting font-size on that instead on on the svg directly. Then it scales properly in safari. A bit trickier for us since we don't send in icon as component prop but rather as children (it can be done with ReactChildren.map but I would really want to avoid that).

Otherwise nav have the same problem pretty much everywhere else they use icons that are not inside buttons if you go on their site and check around..

It is somewhat niche I would say since it only pertains to safari desktop (8% marketshare) and only when someone uses 'cmd' + '+/-' (unless it is affected by pinch to zoom on ios also? I can't check)

https://bugs.webkit.org/show_bug.cgi?id=199236 Someone pushed an ettempted fix for this last year but it was quickly reverted, lol.

[Barsnes]

@eirikbacker suggested doing:

.ds-button[data-icon] :where(img, svg) {
  width: var(--ds-size-10);
  height: var(--ds-size-10);
}

on slack.
This solution has it's own drawbacks, since the svg/img has to be square here. It could be fixed with:

.ds-button[data-icon] :where(img, svg) {
  width: auto;
  height: var(--ds-size-10);
}

I have not yet tested this myself, but could see it working.
Currently we do

  & :where(img, svg) {
    flex-shrink: 0;
    font-size: 1.3em;
  }

which I feel is a lot cleaner, and easier to maintain.

The solution would be for a small amount of users, and means we also need to do this for all other icons we target. If the consumer has other icons in their UI, I would expect them to not grow either, which may be a bit weird for the end-user🤔

Unless we have any good arguments for solving this, I'd suggest not doing anything, and expect Safari/webkit to fix this on their end, even though it has been an issue for 6 years.

[eirikbacker]

We still need flex-shrink: 0 though :)

[oddvernes]

After some testing it turns out that, for some reason, using ch unit instead of em works in safari. Since both are font-size relative units we may as well start using ch (or any other font-size relative unit with wide support)
regular button: 1.3em ≈ 2.03ch, icon-button: 1.5em ≈ 2.3ch, spinner: 1.4em ≈ 2.2ch

An alternate solution without magic numbering:

    --_safari-fix: round(1lh, 1em);
     font-size: calc(var(--_safari-fix) * 1.3);

However this is still slightly buggy on safari where it does not scale on the first zoom-level, then too much on the next before looking more correct on the third.
So visually, normalizing another unit like ex to to 1em with a ratio (that varies slightly with different fonts) works best

[unekinn]

I think it's better to just not set font-size, and fix the places where we have mistakenly used fontSize inline. I tested this change in the codebase and it works nicely, PR here