Workaround for incorrectly triggered hover state when dragging

Inwerpsel · May 20, 2024 · 65d1758 · 65d1758
1 parent ea2ca5f
commit 65d1758
Show file tree

Hide file tree

Showing 5 changed files with 40 additions and 22 deletions.
diff --git a/docs/demo/dist/bundle.js b/docs/demo/dist/bundle.js
diff --git a/docs/demo/dist/bundle.js.map b/docs/demo/dist/bundle.js.map
diff --git a/docs/demo/dist/main.css b/docs/demo/dist/main.css
diff --git a/docs/demo/dist/main.css.map b/docs/demo/dist/main.css.map
diff --git a/src/css/movable.scss b/src/css/movable.scss
@@ -21,6 +21,21 @@ $subtle-grey: rgb(179, 162, 162);
   > :hover {
     border-color: black;
   }
+
+  // Workaround for browser bug when starting a drag and ending up
+  // above another element. The current behavior in Chromium is definitely wrong:
+  // We can only arrive above the element after already having initiated the drag.
+  // Which should have made it ignore the cursor for normal mouse events outside of
+  // the in progress drag. Nevertheless this is what Chromium does.
+  //     => drag has started
+  //     => capture drag image of picked up element before changing its appearance
+  //     => modify the height of picked up element
+  //     => cursor still triggers hover state of next element, but drag image is correct
+  // This false hovered state stays present until you drop the dragged element,
+  // making a random element look different for no reason, very confusing.
+  .is-dragging & > :hover {
+    border-color: transparent;
+  }
 }
 
 $area-speed: .2s;