Chrome cuts off ghost image when using position sticky/fixed
Question
I'm attempting to use HTML5 drag and drop and position: fixed to drag elements from a menu that stays in a fixed position on the left-side of the screen.
The following code works fine in Safari and Firefox, but when I try it in Chrome, after scrolling, the "ghost" image produced from the drag and drop API is not visible. If you scroll just right, you can drag a portion of the ghost image, which indicates to me that it's being clipped in some strange fashion. Setting the position of the left div to absolute works properly but I'd rather not use JS to compute the positioning if I can help it.
I did create a fiddle for this, but it has some other really strange issues running in Safari and Firefox (though it does show the problem in Chrome): https://jsfiddle.net/e4fvrr5y/
Here is the full code I'm using to test:
<!doctype html>
<head>
<style>
body {
display: flex;
}
.left {
width: 200px;
height: 200px;
background-color: #0f0;
position: fixed;
}
.right {
margin-left: 200px;
width: 200px;
height: 3000px;
background: linear-gradient(white, black);
}
.draggable {
background-color: #00f;
padding: 20px;
color: #fff;
cursor: pointer;
}
</style>
</head>
<body>
<div class="left">
<div class="draggable" draggable="true" ondragstart="drag(event)">Draggable element</div>
</div>
<div class="right">
</div>
<script>
function drag(ev) {
ev.dataTransfer.setData("text", "foo");
}
</script>
</body>
</html>
Searching online I found the following bug report for Chromium: Issue 605119
It seems related, as it's talking about position relative being the culprit. But that's nearly two years old, and has been reported fixed, so that's likely been merged into Chrome by this point. Has anyone else encountered this issue, and if so, what steps did you take to fix it?
2 answers
solution1
2 ACCPTED 2018-01-05 19:35:41
This is a bug that appeared in chrome 63.0.3223.0 (see this issue ).
According to the issue tracker, this should be fixed in the next chrome stable release (64.x) in a few weeks.
Note that the fix is already available in Chrome Canary.
UPDATE 25-01-2018
Chrome 64 is now available
solution2
1 2018-01-04 03:56:15
Chrome requires the element being dragged be visible to the browser when the drag operation starts. I had the same problem, I got around it by cloning the draggable element appending it to the body and positioning it over the draggable element in the fixed container on dragstart. Next I set the clone as the element dragImage. Last, I remove the clone on dragend. I was using jQuery here is my fix hope it helps:
var $clone = null;
document.addEventListener( 'dragstart', function( ev ) {
var $el = $( ev.target );
$clone = $el.clone();
$clone.css( {
position: 'absolute',
top: $el.offset().top,
left: $el.offset().left,
width: $el.width()
} );
$('body').append( $clone )
ev.dataTransfer.setDragImage( $clone[ 0 ], 0, 0);
} );
document.addEventListener( 'dragend', function( ev ){
$clone.remove();
$clone = null;
} );
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.