使用粘滞/固定位置时，Chrome会切断重影

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. 我正在尝试使用HTML5拖放和position: fixed以从菜单中拖动元素，该菜单位于屏幕左侧的固定位置。

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. 以下代码在Safari和Firefox中运行良好，但是当我在Chrome中尝试时，滚动后，拖放API生成的“ghost”图像不可见。 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. 将left div的位置设置为absolute可以正常工作，但如果我可以帮助它，我宁愿不使用JS来计算定位。

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/ 我确实为此创建了一个小提琴，但它在Safari和Firefox中运行了一些其他非常奇怪的问题（虽然它确实显示了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 在线搜索我发现了Chromium的以下错误报告：问题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. 但这已经有近两年的历史了，而且据报道已经修复了，所以到目前为止可能已经合并到了Chrome中。 Has anyone else encountered this issue, and if so, what steps did you take to fix it? 有没有其他人遇到过这个问题，如果有的话，你采取了哪些措施来解决它？

Answer 1

This is a bug that appeared in chrome 63.0.3223.0 (see this issue ). 这是chrome 63.0.3223.0中出现的错误（请参阅此问题）。

According to the issue tracker, this should be fixed in the next chrome stable release (64.x) in a few weeks. 根据问题跟踪器，这应该在几周内在下一个chrome稳定版本（64.x）中修复。

Note that the fix is already available in Chrome Canary. 请注意，此修复程序已在Chrome Canary中提供。

UPDATE 25-01-2018 更新25-01-2018

Chrome 64 is now available Chrome 64现已推出

Answer 2

Chrome requires the element being dragged be visible to the browser when the drag operation starts. 当拖动操作开始时，Chrome要求拖动的元素对浏览器可见。 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. 我遇到了同样的问题，我通过克隆可拖动元素将其附加到正文并将其放置在dragstart上固定容器中的可拖动元素上来解决它。 Next I set the clone as the element dragImage. 接下来，我将克隆设置为元素dragImage。 Last, I remove the clone on dragend. 最后，我删除了dragend上的克隆。 I was using jQuery here is my fix hope it helps: 我在这里使用jQuery是我的修复希望它有帮助：

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;
} );

使用粘滞/固定位置时，Chrome会切断重影

问题描述

2 个解决方案

解决方案1
2 已采纳 2018-01-05 19:35:41

解决方案2
1 2018-01-04 03:56:15

使用粘滞/固定位置时，Chrome会切断重影

问题描述

2 个解决方案

解决方案1 2 已采纳 2018-01-05 19:35:41

解决方案2 1 2018-01-04 03:56:15

解决方案1
2 已采纳 2018-01-05 19:35:41

解决方案2
1 2018-01-04 03:56:15