我正在尝试使用 HTML5 拖放和 position: fixed 从位于屏幕左侧固定位置的菜单中拖动元素。
以下代码在 Safari 和 Firefox 中运行良好，但当我在 Chrome 中尝试它时，滚动后，拖放 API 生成的“重影”图像不可见。如果滚动恰到好处，您可以拖动重影图像的一部分，这对我来说表明它正在以某种奇怪的方式被剪裁。将 left div 的位置设置为 absolute 可以正常工作，但如果可以的话，我宁愿不使用 JS 来计算位置。
我确实为此创建了一个 fiddle ，但它在 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 中。还有其他人遇到过这个问题吗？如果遇到过，您采取了哪些措施来解决它？
最佳答案
这是 chrome 63.0.3223.0 中出现的错误(参见 issue)。
根据问题跟踪器，这应该会在几周内在下一个 chrome 稳定版本 (64.x) 中修复。
请注意，该修复程序已在 Chrome Canary 中可用。
更新 25-01-2018
Chrome 64 现已可用
关于javascript - Chrome 在使用位置粘性/固定时切断重影，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/48014999/