[icon] Icon font size ignores dynamically added CSS padding in Safari and Firefox

[vursen]

Description

Finding from #8355

In Safari and Firefox, the icon's font size does not take into account CSS padding when it's added dynamically:

Expected outcome

The icon's font size should adjust to match the new size of the container content box.

Minimal reproducible example

<script type="module">
  import '@vaadin/icon';
  import '@vaadin/vaadin-lumo-styles/font-icons.js';

  setTimeout(() => {
    const icon = document.querySelector('vaadin-icon');
    icon.style.padding = '4px';
  });
</script>

<vaadin-icon font-family="lumo-icons" char="ea0e"></vaadin-icon>

Environment

Vaadin version(s): 24.6 and earlier
OS: Mac OS

Browsers

• Safari 18.1.1
• Firefox 133.0.3

[vursen]

The issue seems to be a Safari bug since it can be reproduced with a plain HTML:

<style>
  #icon {
    width: 100px;
    height: 100px;
    container-type: size;
    box-sizing: border-box;
  }

  #icon::before {
    content: 'H';
    display: block;
    font-size: 100cqh;
    line-height: 1;
  }
</style>

<div id="icon"></div>

<script>
  setTimeout(() => {
    const icon = document.querySelector('#icon');
    icon.style.padding = '25px';
  }, 100)
</script>

The icon component includes a built-in polyfill for calculating the icon font size in browsers that don't support cqh units, which was improved in #6419 to subtract CSS padding from the font size. However, this polyfill is nowadays skipped for Safari because it successfully passes the supportsCQUnitsForPseudoElements check. Maybe we should consider re-enabling the polyfill for Safari at least until this bug is fixed.

[vursen]

Submitted a bug report to WebKit: https://bugs.webkit.org/show_bug.cgi?id=285127

[tomivirkki]

polyfill is nowadays skipped for Safari because it successfully passes the supportsCQUnitsForPseudoElements check

Could supportsCQUnitsForPseudoElements be enhanced to detect the bug?