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

【问题标题】：Chrome cuts off ghost image when using position sticky/fixed使用位置粘滞/固定时，Chrome 会切断重影
【发布时间】：2017-12-28 22:11:14
【问题描述】：

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

以下代码在 Safari 和 Firefox 中运行良好，但是当我在 Chrome 中尝试时，滚动后，从拖放 API 生成的“幽灵”图像不可见。如果你滚动得恰到好处，你可以拖动一部分重影图像，这向我表明它正在以某种奇怪的方式被剪裁。将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 的错误报告：Issue 605119

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

【问题讨论】：

可能和这个bug有关：bugs.chromium.org/p/chromium/issues/detail?id=798182
是的，它看起来确实相关！你能找到任何解决方法吗？我已经尝试了一些东西，但没有得到任何真正有效的东西（除了使用我不想做的第三方拖放）
我能够为我的特殊情况找到一种解决方法，但它不适用于您的情况（用顶部/左侧定位替换 CSS 转换）。我建议你在铬问题跟踪器上打开一个新问题。
好吧，如果我无法让 Lorenzo 的解决方案发挥作用，我可能会这样做。
Chrome Canary 今天刚刚发布了一个错误修复。我可以确认它也解决了这个错误。我将在此处发布更多详细信息的答案。

标签： javascript css html google-chrome drag-and-drop

【解决方案1】：

这是一个出现在 chrome 63.0.3223.0 中的错误（请参阅此issue）。

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

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

2018 年 1 月 25 日更新

Chrome 64 现已推出

【讨论】：

好的，这听起来很完美，所以希望这能解决问题。感谢您的信息！
作为（相当晚的）后续行动，这在 Chrome 中不再是问题。

【解决方案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 不处理它的原因，但不完全确定如何绕过它。将更新结果。