New issue
Advanced search Search tips

Issue 649764 link

Starred by 2 users

Issue metadata

Status: Available
Owner: ----
Cc:
Components:
EstimatedDays: ----
NextAction: ----
OS: Linux , Android , Windows , All , Chrome , Mac
Pri: 2
Type: Bug-Regression



Sign in to add a comment

Drag preview includes elements underneath it when dragged element has a child with overflow: hidden

Reported by emilecan...@gmail.com, Sep 23 2016

Issue description

UserAgent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_11_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/53.0.2785.116 Safari/537.36

Steps to reproduce the problem:
1. Open this fiddle: http://jsfiddle.net/95zf5un9/
2. Start dragging the blue square
3. Observe the "ghost" drag preview

What is the expected behavior?
The "ghost" drag preview shows only the blue square and its contents 

What went wrong?
The "ghost" drag preview includes a portion of the elements below it.

Did this work before? N/A 

Chrome version: 53.0.2785.116  Channel: stable
OS Version: OS X 10.11.6
Flash Version: Shockwave Flash 23.0 r0

Might be related to https://bugs.chromium.org/p/chromium/issues/detail?id=413290, but I'm not sure.

One commenter mentioned it might be related to overflow: hidden
 

Comment 1 by shrike@chromium.org, Sep 27 2016

Labels: Needs-Feedback
There are two blue squares.

Please attach a movie of the bug in action so that I know we're seeing and doing the same as you, and more details on how to reproduce the problem.
Really sorry about that, I posted the wrong fiddle. The correct one is this one: http://jsfiddle.net/4njyyd0h/
Here is the requested video
drag_drop_480.mov
3.8 MB Download
Components: -UI Blink>DataTransfer
Labels: -Needs-Feedback OS-Android OS-Chrome OS-Linux OS-Windows
Status: Untriaged (was: Unconfirmed)
Summary: Drag preview includes elements underneath it when dragged element has a child with overflow: hidden (was: Drag preview too large when dragged element has a child with overflow: hidden)
I'm also seeing this behaviour in 53.0.2785.116 from the jsfiddle provided in #c2.

Comment 5 by dcheng@chromium.org, Sep 29 2016

Cc: pdr@chromium.org

Comment 6 by pdr@chromium.org, Sep 29 2016

Components: -Blink>DataTransfer Blink>Paint
Labels: -OS-Linux -OS-Android -OS-Windows -Type-Bug -OS-Chrome -OS-Mac OS-All Type-Bug-Regression
Status: Available (was: Untriaged)
Thanks for taking the time to file this and make a small repro case.

In case you are blocked on this, you can workaround this issue by adding a clip to the overflow: hidden element: "clip-path: inset(0px 0px);"

This is a regression. We need to account for clips in LocalFrame's DragImageBuilder.

Comment 7 by pdr@chromium.org, Sep 29 2016

Attaching a repro in case jsfiddle goes down.
drag.html
2.2 KB View Download
Thanks a lot for the workaround. I think I discovered another issue while testing this workaround, though. When the clipped element is too big, the drag preview is just absent. Here is a jsfiddle reproducing the issue.

http://jsfiddle.net/emilecantin/vt2h1v9p/2/

The red square has the original bug, the green one has the workaround, and the orange one is the same as the green one, but with one more paragraph in its content.

I think I'll try to make the content smaller in the meantime.
Project Member

Comment 9 by sheriffbot@chromium.org, Feb 21 2018

Labels: Hotlist-Recharge-Cold
Status: Untriaged (was: Available)
This issue has been Available for over a year. If it's no longer important or seems unlikely to be fixed, please consider closing it out. If it is important, please re-triage the issue.

Sorry for the inconvenience if the bug really should have been left as Available. If you change it back, also remove the "Hotlist-Recharge-Cold" label.

For more details visit https://www.chromium.org/issue-tracking/autotriage - Your friendly Sheriffbot
Labels: -Hotlist-Recharge-Cold OS-Android OS-Chrome OS-Linux OS-Mac OS-Windows
Status: Available (was: Untriaged)
Still busted. Seems like an easy thing to fix.
I just tested it, and the original issue is still present in Chrome 64, using the fiddle in comment #2 (this one: http://jsfiddle.net/4njyyd0h/)

Not sure what the "Available" status means, but it's still a bug, and I'd still like to see it fixed.

Sign in to add a comment