Google Chrome 106 draggable causing elements to disappear

When using Drag & Drop elements most other elements contained in absolute positioned elements disappear from screen.

If I resize the window these elements reappear but will again disappear when begining to drag.

I’m experiencing this behavour in the latest version of Google Chrome (106 & Beta Version 107.0.5304.18) and now Edge.

I’m unsure if this is a bug (I would hope so) but it has broken most of my clients web apps!

EDIT: I’m getting mixed reports about it working on Beta 107. The issue is still present for some users and not others.

This snippet demonstrates the issue but the code below is all I’m using to replicate the issue.

ul {
  position: absolute;
  top: 0;
}

div {
  margin-left: 200px;
  margin-top: 50px;
}

<ul>
  <li>Example item</li>
  <li>Example item</li>
  <li>Example item</li>
  <li>Example item</li>
  <li>Example item</li>
</ul>
<div draggable="true">
  Please drag me
</div>

Are any of you experiencing these issues, does anyone have a work around for this or do you suspect this is a bug and we should hold out and hope for a fix?

Answer

As is posted in the Chromium issue thread, you could add the following styles to the draggable element as a workaround/fix.

transform: translate(0, 0);
z-index: 0;

Advertisement

Answer