[menubar] Icon from one menubar bleeds into overlay of another menubar

[sissbruecker]

Description

When rendering two menubars below each other, where both have a button with an icon, then the icon of the second menubar bleeds into the overlay of the first menubar when it is opened.

Initially:

After opening first menubar:

The issue only seems to reproduce in Firefox. It also doesn't reproduce when just rendering a regular vaadin-icon below the menubar.

Expected outcome

The icon should not display over the menubar overlay.

Minimal reproducible example

<vaadin-menu-bar></vaadin-menu-bar>
<vaadin-menu-bar></vaadin-menu-bar>
<script type="module">
  import '@vaadin/menu-bar';
  import '@vaadin/icon';
  import '@vaadin/icons/vaadin-iconset.js';

  const menuBars = document.querySelectorAll('vaadin-menu-bar');
  menuBars.forEach((menuBar) => {
    const icon = document.createElement("vaadin-icon");
    icon.icon = "vaadin:phone";

    menuBar.items = [
      {
        component: icon,
        children: [
          { text: 'Test' },
        ],
      }
    ];
  });
</script>

Steps to reproduce

1. Add the snippet above to a page
2. Open the first menu bar

Environment

Vaadin version(s): Reproduces since 24.2, works in 24.1 and 23.4

Browsers

Firefox

[FrediWa]

The issue seems to be caused by container-type: size; in vaadin-icon. Removing this single line from vaadin-icon-styles.js is workaround for the problem. However the real problem seems to be in Firefox. FF127 should support container-type: size; but it obviously does not. This leads to a lot of interesting rendering symptoms. For instance, with multiple menu bars, the issue persists only if the last menu bar has icons, and in this case only for icons in the last menu bar.