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

Question

我正在尝试使用HTML5拖放和position: fixed以从菜单中拖动元素，该菜单位于屏幕左侧的固定位置。

以下代码在Safari和Firefox中运行良好，但是当我在Chrome中尝试时，滚动后，拖放API生成的“ghost”图像不可见。 如果你向右滚动，你可以拖动鬼影的一部分，这表明它以某种奇怪的方式被剪辑。 将left div的位置设置为absolute可以正常工作，但如果我可以帮助它，我宁愿不使用JS来计算定位。

我确实为此创建了一个小提琴，但它在Safari和Firefox中运行了一些其他非常奇怪的问题（虽然它确实显示了Chrome中的问题）： https ： //jsfiddle.net/e4fvrr5y/

这是我用来测试的完整代码：

<!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>

在线搜索我发现了Chromium的以下错误报告：问题605119

这似乎是相关的，因为它谈论的是位置相对是罪魁祸首。 但这已经有近两年的历史了，而且据报道已经修复了，所以到目前为止可能已经合并到了Chrome中。 有没有其他人遇到过这个问题，如果有的话，你采取了哪些措施来解决它？

Answer 1

这是chrome 63.0.3223.0中出现的错误（请参阅此问题）。

根据问题跟踪器，这应该在几周内在下一个chrome稳定版本（64.x）中修复。

请注意，此修复程序已在Chrome Canary中提供。

更新25-01-2018

Chrome 64现已推出

Answer 2

当拖动操作开始时，Chrome要求拖动的元素对浏览器可见。 我遇到了同样的问题，我通过克隆可拖动元素将其附加到正文并将其放置在dragstart上固定容器中的可拖动元素上来解决它。 接下来，我将克隆设置为元素dragImage。 最后，我删除了dragend上的克隆。 我在这里使用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