Fix missing drag image on FF, Safari (#9409)

When CSS transform has been applied, the drag image is missing (safari),
or gets offset (FF). Fixed by using custom drag image without transform,
and checking for transforms on parent DOM tree. Does NOT fix #9408
When there are frozen columns used, the image needs should not look weird because of the frozen column transitions.
The multiselection column is now not shown it is frozen.

Fixes #9261

2 files changed, 40 insertions, 2 deletions

diff --git a/uitest/src/main/java/com/vaadin/tests/components/grid/GridDragAndDrop.java b/uitest/src/main/java/com/vaadin/tests/components/grid/GridDragAndDrop.java
index fedae64e7d..7ccb808618 100644
--- a/uitest/src/main/java/com/vaadin/tests/components/grid/GridDragAndDrop.java
+++ b/uitest/src/main/java/com/vaadin/tests/components/grid/GridDragAndDrop.java
@@ -33,6 +33,7 @@ import com.vaadin.shared.ui.grid.DropMode;
 import com.vaadin.tests.components.AbstractTestUIWithLog;
 import com.vaadin.tests.util.Person;
 import com.vaadin.tests.util.TestDataGenerator;
+import com.vaadin.ui.CheckBox;
 import com.vaadin.ui.Grid;
 import com.vaadin.ui.HorizontalLayout;
 import com.vaadin.ui.Layout;
@@ -60,6 +61,7 @@ public class GridDragAndDrop extends AbstractTestUIWithLog {
 
         // Layout the two grids
         Layout grids = new HorizontalLayout();
+
         grids.addComponents(left, right);
         grids.setWidth("100%");
 
@@ -80,10 +82,30 @@ public class GridDragAndDrop extends AbstractTestUIWithLog {
         dropLocationSelect.addValueChangeListener(
                 event -> dropTarget.setDropMode(event.getValue()));
 
+        CheckBox transitionCheckBox = new CheckBox("Transition layout", false);
+        transitionCheckBox.addValueChangeListener(event -> {
+            if (event.getValue()) {
+                grids.addStyleName("transitioned");
+            } else {
+                grids.removeStyleName("transitioned");
+            }
+        });
+
+        RadioButtonGroup<Integer> frozenColumnSelect = new RadioButtonGroup<>(
+                "Frozen columns", Arrays.asList(new Integer[] { -1, 0, 1 }));
+        frozenColumnSelect.setValue(left.getFrozenColumnCount());
+        frozenColumnSelect.addValueChangeListener(event -> {
+            left.setFrozenColumnCount(event.getValue());
+            right.setFrozenColumnCount(event.getValue());
+        });
+
         Layout controls = new HorizontalLayout(selectionModeSelect,
-                dropLocationSelect);
+                dropLocationSelect, transitionCheckBox, frozenColumnSelect);
 
         addComponents(controls, grids);
+
+        getPage().getStyles()
+                .add(".transitioned { transform: translate(-30px, 30px);}");
     }
 
     private Grid<Person> createGridAndFillWithData(int numberOfItems) {
diff --git a/uitest/src/main/java/com/vaadin/tests/dnd/DragImage.java b/uitest/src/main/java/com/vaadin/tests/dnd/DragImage.java
index fcac0b1743..624461a536 100644
--- a/uitest/src/main/java/com/vaadin/tests/dnd/DragImage.java
+++ b/uitest/src/main/java/com/vaadin/tests/dnd/DragImage.java
@@ -10,6 +10,7 @@ import com.vaadin.server.ThemeResource;
 import com.vaadin.server.VaadinRequest;
 import com.vaadin.tests.components.AbstractTestUIWithLog;
 import com.vaadin.tests.components.uitest.TestSampler;
+import com.vaadin.ui.CheckBox;
 import com.vaadin.ui.HorizontalLayout;
 import com.vaadin.ui.Label;
 import com.vaadin.ui.VerticalLayout;
@@ -63,7 +64,22 @@ public class DragImage extends AbstractTestUIWithLog {
         new DragSourceExtension(gridRowLikeLabel);
         styles.add(css);
 
-        addComponent(new VerticalLayout(layout1, layout2, gridRowLikeLabel));
+        VerticalLayout layout = new VerticalLayout();
+        CheckBox transitionCheckBox = new CheckBox("Transition layout", false);
+        transitionCheckBox.addValueChangeListener(event -> {
+            if (event.getValue()) {
+                layout.addStyleName("transitioned");
+            } else {
+                layout.removeStyleName("transitioned");
+            }
+        });
+
+        layout.addComponents(transitionCheckBox, layout1, layout2,
+                gridRowLikeLabel);
+        addComponent(layout);
+        layout.addStyleName("transitioned");
+        getPage().getStyles()
+                .add(".transitioned {transform: translateX(50px);}");
     }
 
 }