vaadin-select rendering broken in flex container

[HJK181]

Description

I added two vaadin-select in a flex-box container to the page and see strange rendering issues which I can't explain myself by exploring the DOM.

Expected outcome

Multiple vaadin-select elements can be placed inside a flex-box container without rendering issues.

Minimal reproducible example

See this glitch: https://vaadin-select-render-bug.glitch.me/

Steps to reproduce

1. Create a flex-box container
2. Place two vaadin-select elements next to each other in a row.
3. Hover over the left vaadin-select and see the label of the right flickering. Also hovering over the right one sometimes fixes the rendering bug until you again hover the other element.

Environment

Vaadin version(s): "@vaadin/vaadin-select": "^23.0.10", Chrome: Version 101.0.4951.64 (Offizieller Build) (64-Bit) OS: 5.16.20-2-MANJARO - KDE

Browsers

Chrome

[HJK181]

Edit: Seems to work on my colleague's Mac/Ubuntu-Gnome with the exact same Chrome version?!

[web-padawan]

Similar issue reported internally from a user with Chromebook (could be Linux specific):

I have an issue when using Chrome (Version 103.0.5060.114). The values of an input field will overlap to the next field. its a new chromebook which i just set up few days ago. I also tried it on a windows pc and it not appeared.

UPDATE: When commenting the “-webkit-mask-image” css property the issue seems to disappear.

[HJK181]

Last Chrome update to 104.0.5112.79 seemed to fix the problem for me...

[web-padawan]

Closing per above comment as stale.

[mlopezFC]

Just a comment. We found this issue happening on latest Chrome (125.something) on Linux Mint 21.2 with Vaadin 23. We fixed it by adding the following to all input fields:

	mask-image: none !important;
	-webkit-mask-image: none !important;

The strange thing is that it only happened with some devices, not all devices running Linux Mint 21.2 were having this issue. Couldn't figure out the difference. Hope we're not breaking anything.