Grid addComponentColumn is Broken in Latest Google Chrome Version

[dwlabcube]

When i run the latest bakery-app and change the following two Lines in AbstractBakeryCrudView the /users view is broken and the edit-Button often only come after a Ctrl+F5 reload of the page.

It only happens since the release of Google Chrome Version 72.0.3626.81

Code: grid.setDataProvider(dataProvider);

setupGrid(grid);

//Crud.addEditColumn(grid); --> This Line is the original which uses a TemplateRenderer

grid.addComponentColumn(e -> new Button("edit")); // This line is the new Line and it uses a componentColumn

[heruan]

I'm using 13.0.0.alpha4 and I can confirm that component columns don't always work, i.e. randomly appear as empty. This could happen at first page load, but also during in-app navigation; usually a page refresh fixes it, but in a couple of cases I had to refresh twice.

[dinumihnea]

Also in 12.0 (all) versions of Vaadin the bug is present, after Chrome update!

[silvan-lincan]

I can confirm the same issue with TreeGrid-Editor in both Vaadin 12.0.5 and 13.0.0.beta1.

[nemojmenervirat]

for someone who is using polymer template, you can delete and insert this box-sizing rule and flow-component-renderer will always work in latest chrome (Version 72.0.3626.96 (Official Build) (64-bit)):

afterServerUpdate(){
                var styleSheet = this.shadowRoot.styleSheets[0];
                styleSheet.deleteRule(1);
                styleSheet.insertRule('*,::after,::before { box-sizing:border-box }', 1);
}

[HaydenDekker]

I've noticed that ui events on other elements on the same page can cause the to render. For example, I have a combobox above the grid and selecting the drop down causes the grid custom components to partially render. The page correctly loads the HTML it's just not rendered.

[dinumihnea]

for someone who is using polymer template, you can delete and insert this box-sizing rule and flow-component-renderer will always work in latest chrome (Version 72.0.3626.96 (Official Build) (64-bit)):

afterServerUpdate(){
                var styleSheet = this.shadowRoot.styleSheets[0];
                styleSheet.deleteRule(1);
                styleSheet.insertRule('*,::after,::before { box-sizing:border-box }', 1);
}

is possible to do this using external CSS?

[pleku]

Something in Chrome 72 has changed and broken this, my guess is that it is https://chromium-review.googlesource.com/c/chromium/src/+/1350441

I've just tested this with https://www.google.com/chrome/canary/ and it is working again - I'm not able to reproduce the issue.
For Dev and Beta channels, it is still broken.

[pleku]

Just guessing, but the fix might have been https://chromium-review.googlesource.com/c/chromium/src/+/1444151 or https://chromium.googlesource.com/chromium/src/+/3e610731bc6f24b929249d336835a865a791a69b

Currently those fixes are landing to Chrome 74, and we have no idea if those will be picked to 72 or 73. So we are looking at whether we can somehow trigger something in flow-component-renderer that will fix address the issue for now.

[Legioth]

Seems like this was accidentally closed by typo in Closes definition of unrelated PR

[heruan]

Thank you @pleku for the investigation and findings! This is indeed a serious issue as it suddenly started to affect users of apps already in production with V12.

[erszoke]

I agree with @heruan about the seriousity, our company has three affected applications in production.

[heruan]

Question for the team: which is the strategy here? Being a Chrome bug, I suppose it's not certain it can be fixed on the component's side. Are you in contact with Chrome developers about this? Since it appears the fix to be already there, it's vital they know it affects existing products and it should be backported to the current Chrome version.

[pleku]

Question for the team: which is the strategy here? Being a Chrome bug, I suppose it's not certain it can be fixed on the component's side. Are you in contact with Chrome developers about this? Since it appears the fix to be already there, it's vital they know it affects existing products and it should be backported to the current Chrome version.

We have a working fix for Grid. But since the issue might also be in other components that use flow-component-renderer, we want to make the fix so that it can also work with any component without going in and changing and releasing Flow again for this (flow-data contains component renderer).

The fix will only be applied for Chrome versions >71 and we will test with newer Chrome versions so that we can then limit the workaround for only effected versions. There will be a small performance hit from the workaround. As I said, in Canary channel (version 74) this is already fixed, but not in beta/dev channels (version 73).

The bug itself is quite nasty regression for web components using shadow-dom, so it might be that we can pass this information to Chrome team using our contacts. The (presumably) related bug ticket itself seems to be private, I cannot open it.

[jetdario]

Hi guys, was the issue has already been fix? Im having the same problem now.

[denis-anisimov]

It has been fixed.
Please check which version you use.
It might be that in your version it's not fixed yet.

[Legioth]

To clarify, the fix has been included in Vaadin versions 10.0.11, 12.0.7, and 13.0.0.beta2.

[jetdario]

Thanks denis and Legioth.. updated my version it works.

[nemanjakmno]

First row in grid with only one component column not visible in chrome 72+ . After page resize or data provider refresh it appears.

[Legioth]

@kolle1986 What version of Vaadin and/or Flow are you using?

[nemanjakmno]

@Legioth 13.0.0 - the latest version

[Legioth]

@kolle1986 In that case, please open a new issue with instructions on how to reproduce. We won't reopen this issue since that would make it more difficult keep track of which changes have been included in which version.

[dogInTheWok]

The same here: 13.0.1 with Chromium 72.0.3626.121 on Ubuntu 18.04.2 LTS we still observe the issue, i.e. custom components like images or buttons are not loaded in tables. After Ctrl + F5 it is rendered correctly. Scrolling also fixes the issue. SImple refresh (F5) does not work though. In Firefox everything is rendered correctly.

[pleku]

@dogInTheWok please create a new issue with the instructions (or even better, code) to reproduce.