Bug: Input-Fields wrongly rendered with Chrome OS

[lucaschraml]

Description of the bug

When i fill Input-Fields like Comboboxes or Datepickers with values, the values will render on other components aswell. For testing i used the vaadin starter and added the "Adress Form"-View. The problem only occurs on Chrome OS (Version i used: 103.0.5060.114).

Expected behavior

The Fields should not display the values of other Fields

Minimal reproducible example

To reproduce the bug you have to use a Chromebook with Chrome OS (Version: 103.0.5060.114). Create a vaadin starter (https://start.vaadin.com/app) and fill in some values into the Input-Fields.

Versions

• Vaadin / Flow version: 23
• Java version: 11
• OS version: Chrome OS Version 103.0.5060.114
• Browser version (if applicable): Version 103.0.5060.114
• Application Server (if applicable):
• IDE (if applicable):

[cromoteca]

Confirmed on Linux (Fedora 36 with Wayland) with Chrome Version 103.0.5060.114 (Official Build) (64-bit)

[F0rce]

Not reproduceable on Windows 10 Pro (10.0.19044 Build 19044) with Google Chrome Version 103.0.5060.114 (Official Build) (64-Bit)

[web-padawan]

Moved the issue to web components repo as it looks like a Chrome rendering bug.

[web-padawan]

I tried to reproduce this in a virtual machine on Mac M1 (Ubuntu 20.04, Chromium 103.0.5060.53) and there it works:

[sirbris]

Could also reproduce this issue on my ChromeBook (Chrome version 103.0.5060.64) Chrome/Firefox on Mac works fine

[F0rce]

Can confirm not reproduceable on Mac (Monterey Version 12.4 - 21F79) with Google Chrome Version 103.0.5060.114 (Official Build) (x86_64)

[web-padawan]

As mentioned internally, when commenting the “-webkit-mask-image” CSS property the issue seems to disappear. Here is the suspicious line, could you please try if removing it helps or not?

https://github.com/vaadin/web-components/blob/e8b431e1e0f6a4428876de1d348f1b5a544936ed/packages/input-container/theme/lumo/vaadin-input-container-styles.js#L42

The file is located here: node_modules/@vaadin/input-container/theme/lumo/vaadin-input-container-styles.js.

[lucaschraml]

Can confirm, when removing the "-webkit-mask-image" CSS property the issue disappears.

[web-padawan]

Thanks. It should be possible to override this using custom theme by adding the following CSS:

::slotted(:not([slot$='fix'])) {
  --_lumo-text-field-overflow-mask-image: none !important;
}

This code needs to be placed in the frontend/themes/{my-theme}/components/input-container.css file.

[sirbris]

Since we just migrated from V14 to V23, there's no theme set yet... can that CSS part be just imported in the main view as well or how should it be done without theme?

[sirbris]

To answer my own question: Use this annotation on MainView and add the given css to that file like @web-padawan mentioned: @CssImport(value = "./styles/components/input-container.css", themeFor = "vaadin-input-container")

[web-padawan]

Sorry about not answering your question. Yes, @CssImport is the right way to apply styles without using custom theme.

[lucaschraml]

When using readonly input-fields, its kind of the opposite. When --_lumo-text-field-overflow-mask-image: none !important; is applied the issue occurs like the screenshot is showing.

So suggest the following: ::slotted(:not([slot$='fix']):not([readonly])) { --_lumo-text-field-overflow-mask-image: none !important; } Thats how it looks like when the fix is applied:

[KingFalse]

Could also reproduce this issue on my openSUSE Tumbleweed (Chrome Version 110.0.5481.177 (Official Build) (64-bit))

[rolfsmeds]

This would seem to be caused by a GPU acceleration bug in Chromium: https://bugs.chromium.org/p/chromium/issues/detail?id=1399431

[eiswind]

How could we workaround in Vaadin 24.1? I tried

vaadin-input-container::slotted(:not([slot$='fix'])) {
    --_lumo-text-field-overflow-mask-image: none !important;
}

But that does not seem to help.

This also does happen with regular Chrome on Linux at my side.

[rolfsmeds]

The mask is applied on the native <input> element, the selector for which is simply input, or, if you want to be component-specific, vaadin-text-field > input (as seen in the css selector reference for Text Field).

Since you probably want to apply it to all fields, you can just use input, so this should do it:

input {
  --_lumo-text-field-overflow-mask-image: none;
}

[rolfsmeds]

I can no longer reproduce this on Chrome 114 on Chrome OS (same version), so presumably the issue has been fixed in Chrome despite the ticket still being open.

Closing as fixed. Please comment if you can reproduce this is the latest version of Chrome, and I'll reopen.