Misaligned list builder parts in Chrome

[edler-san]

This is an issue with at least 8.8.6 and 8.9.0.beta3 as can be seen on https://demo.vaadin.com/sampler/#ui/data-input/multiple-value/list-builder

Chrome 76.0.3809.132 (Offizieller Build) (64-Bit) is used. Firefox is unaffected.

Especially in larger list this can render a complete UI useless (version 8.8.6 here)

[alexandru78]

same happens on vaadin 7

[TatuLund]

This looks like issue due some recent change in Chrome, there has not been changes in the code of this component lately, that could explain this.

[TatuLund]

For some reason the problem does not happen on my computer Windows 10, Chrome: Version 76.0.3809.132 (Official Build) (64-bit)

[knoobie]

I could reproduce the misalignment with chromium on ubuntu. My windows 7 and MacOS didn't have the error.

[TatuLund]

I tested this with another Windows 10 PC with Chrome, and there the issue happens. This makes the problem really weird

Also I inspected the DOM with dev tools, and v-select-twincol-buttons does have correct styles, most importantly "vertical-align: top" is there, but Chrome just does not honor it in this case. Which makes the problem extremely hard to solve

[TatuLund]

There is an issue reported in Chromium bug tracker that seem to match the conditions of our observed issue

https://bugs.chromium.org/p/chromium/issues/detail?id=1001664&q=vertical-align&colspec=ID%20Pri%20M%20Stars%20ReleaseBlock%20Component%20Status%20Owner%20Summary%20OS%20Modified

[TatuLund]

The ticket I linked has the following workaround "Disabling LayoutNG in chrome://flags returns correct behavior."

I tested the above hint on my computer, and it indeed seems to fix the problem.

[jontto]

I can confirm that this workaround works for our Vaadin 8.8.6 based application also (although I don't like this workaround...)

[TatuLund]

The Chromium ticket about this ticket has progressed swiftly, it states now "The fix in #c7 confirmed in 79.0.3909.0." So I am favoring to have this won't fix at Vaadin side and just wait for Chome 79 release, which will solve the issue.

[TatuLund]

As there were comment in Chromium bug tracker "approved for merge to M78, branch:3904" I tested this today with Chrome 78 having LayoutNG enabled, and the problem seem to have disappeared.