search

vaadin / framework

Vaadin 6, 7, 8 is a Java framework for modern Java web applications.
http://vaadin.com/
Other
1.78k stars 729 forks source link

Grid multi-select DnD broke on Chrome 74 update #11553

Closed petrixh closed 5 years ago

petrixh commented 5 years ago

After a recent chrome update (probably April 23, 2019) Chrome version got bumped from 73 to 74. During this update, multi-select DnD drag preview image in Chrome seems to have broken when running on Windows 10 (see screenshot). The same Chrome version on OS X works fine with DnD so seems to be OS specific. Customer also reports that the same issue is present in an "Acer ChromeBook & Chrome" (presumably also running Chrome 74).

The problem is easily reproducible in the Sampler: https://demo.vaadin.com/sampler/#ui/drag-drop/grid-reorder-rows-html5

as well as this demo application of an extension: https://incubator.app.fi/incubator-dnd-autoscroll-demo/

Quickly debugging, there isn't anything in the console that would indicate any errors happening on the client-side, almost like the dragStartEvent doesn't get triggered which therefore never renders the preview (or a change in how event.preventDefault/stopPropagation handling in chrome).

To make sure we can quickly validate and fix the bug, please provide as much as possible of the following information:

1) Go to https://demo.vaadin.com/sampler/#ui/drag-drop/grid-reorder-rows-html5 2) enable multi-select and select at least 2 rows 3) Drag the two rows

Error: No drag preview with a count badge is shown

Expected: Drag preview with count badge should be visible just like before and on OS X

Possibly related to: https://github.com/vaadin/framework/issues/11219 However, reproducible on VirtualMachine without touch devices configured on it (i.e. not a hybrid device)

TatuLund commented 5 years ago

The most likely root cause is the new "feature" in Chrome 74 described, e.g. here: https://venturebeat.com/2019/04/23/google-chrome-74/

"Motion sickness in the browser is a real thing. Android provides an accessibility option to reduce motion whenever possible, as shown above in the “remove animations” setting. Chrome is now taking that a step further so websites can limit motion sickness when users are viewing parallax scrolling, zooming, and other motion effects.

Chrome 74 introduces prefers-reduced-motion (part of Media Queries Level 5) that allows websites to honor when an operating system is set to limit motion effects. This might not seem like a big deal today, but it could be very useful if websites start abusing motion effects."

And in the implementation of Drag and Drop, the drag image is using animation, which is most likely blocked by this feature.

Haprog commented 5 years ago

At least on macOS Mojave it doesn't seem to be an issue in Chrome 74 even if I turn on "Reduce motion" in the system preferences (Accessibility > Display > Reduce motion) and restart Chrome.

Apparently the corresponding setting in Win 10 is found in: Settings > Ease of Access > Display > Simplify and personalise Windows > Show animation in Windows. So maybe you could try if toggling that has any effect to rule it out.

TatuLund commented 5 years ago

I was able to do some further testing with touch enabled Windows 10 PC with latest Chrome 74+. It seems that the problem is not limited to multi-select DnD, but actually all DnD operations fail.

Apparently the corresponding setting in Win 10 is found in: Settings > Ease of Access > Display > Simplify and personalise Windows > Show animation in Windows.

I need to try that next, I was not able to find out the setting yesterday.

TatuLund commented 5 years ago

Settings > Ease of Access > Display > Simplify and personalise Windows > Show animation in Windows

The above has nothing to do with this.

However the following Chrome flags settings remedied the issue for me both for the Sampler and https://incubator.app.fi/incubator-dnd-autoscroll-demo/

Chrome settings

TatuLund commented 5 years ago

Note, the settings mentioned in my earlier comment are needed only with PCs with real touch screen. They fix the situation where functionality is completely broken.

However, they do not fix the cosmetic issue of the missing drag image.

TatuLund commented 5 years ago

The same issue happens also with the latest Chrome version 75.0.3770.100

TatuLund commented 5 years ago

Tested with versio 76.0.3809.100 of Chrome, the DnD animation is still missing.

TatuLund commented 5 years ago

I am closing this as wont fix, since we do not have method to fix it right now.