You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
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.
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.
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:
![Bildschirmfoto 2024-06-17 um 15 42 56](https://private-user-images.githubusercontent.com/357820/340326356-0e84281b-2020-4b94-9a8f-c41aa7b4494d.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjQxMDMyMjgsIm5iZiI6MTcyNDEwMjkyOCwicGF0aCI6Ii8zNTc4MjAvMzQwMzI2MzU2LTBlODQyODFiLTIwMjAtNGI5NC05YThmLWM0MWFhN2I0NDk0ZC5wbmc_WC1BbXotQWxnb3JpdGhtPUFXUzQtSE1BQy1TSEEyNTYmWC1BbXotQ3JlZGVudGlhbD1BS0lBVkNPRFlMU0E1M1BRSzRaQSUyRjIwMjQwODE5JTJGdXMtZWFzdC0xJTJGczMlMkZhd3M0X3JlcXVlc3QmWC1BbXotRGF0ZT0yMDI0MDgxOVQyMTI4NDhaJlgtQW16LUV4cGlyZXM9MzAwJlgtQW16LVNpZ25hdHVyZT01NDA3MGRjZTYyZTgyZTZiYmQxYWEzMWZhN2QzY2ViN2RkYzFkYzRhZjg2MGJlMzA1ZTA3M2MyZjJhMWI0ZTM3JlgtQW16LVNpZ25lZEhlYWRlcnM9aG9zdCZhY3Rvcl9pZD0wJmtleV9pZD0wJnJlcG9faWQ9MCJ9.LsInGAgVe0gXrp_lhOSSkWp5Fy3qIzCtL1TfkXDHDgA)
After opening first menubar:
![Bildschirmfoto 2024-06-17 um 15 43 02](https://private-user-images.githubusercontent.com/357820/340326437-d5ccda81-acbc-45e4-86b2-03032de76447.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjQxMDMyMjgsIm5iZiI6MTcyNDEwMjkyOCwicGF0aCI6Ii8zNTc4MjAvMzQwMzI2NDM3LWQ1Y2NkYTgxLWFjYmMtNDVlNC04NmIyLTAzMDMyZGU3NjQ0Ny5wbmc_WC1BbXotQWxnb3JpdGhtPUFXUzQtSE1BQy1TSEEyNTYmWC1BbXotQ3JlZGVudGlhbD1BS0lBVkNPRFlMU0E1M1BRSzRaQSUyRjIwMjQwODE5JTJGdXMtZWFzdC0xJTJGczMlMkZhd3M0X3JlcXVlc3QmWC1BbXotRGF0ZT0yMDI0MDgxOVQyMTI4NDhaJlgtQW16LUV4cGlyZXM9MzAwJlgtQW16LVNpZ25hdHVyZT02Y2ZiNDhiNTdiNWUxMTRjMzhhMDFhZDY4OTQ3YjczMWJhODY4MmJmNWY3NGZkMzQyOGUyZjc3YzcwYzA5MWQ4JlgtQW16LVNpZ25lZEhlYWRlcnM9aG9zdCZhY3Rvcl9pZD0wJmtleV9pZD0wJnJlcG9faWQ9MCJ9.wFDiedAEqgIuesIzHpvwYiwRj5Y1Nfs_sAa3UJ41tMM)
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
Steps to reproduce
Environment
Vaadin version(s): Reproduces since 24.2, works in 24.1 and 23.4
Browsers
Firefox
The text was updated successfully, but these errors were encountered: