当使用位置粘贴/固定时，Chrome会切断幻影图像 [英] Chrome cuts off ghost image when using position sticky/fixed
问题描述
我尝试使用HTML5拖放功能和 position：fixed 从屏幕左侧固定位置的菜单中拖动元素。
以下代码在Safari和Firefox中运行良好，但是当我在Chrome中尝试它时，滚动后，从拖放API生成的ghost图像是不可见。如果您向右滚动，您可以拖动一部分鬼影图像，这表明它正以某种奇怪的方式被剪辑。将左侧 div的位置设置为绝对可以正常工作，但我宁愿不使用JS来计算位置if我可以帮助它。
我为此创建了一个小提琴，但它在Safari和Firefox中运行时还有一些其他非常奇怪的问题（尽管它确实在Chrome中显示了问题）：
https://jsfiddle.net/e4fvrr5y/
以下是我用来测试的完整代码：
<！doctype html>
< head>
< style>
body {
display：flex;
}
.left {
width：200px;
height：200px;
背景颜色：＃0f0;
位置：固定;
}
.right {
margin-left：200px;
width：200px;
height：3000px;
背景：线性渐变（白色，黑色）;
}
.draggable {
background-color：＃00f;
padding：20px;
颜色：#fff;
光标：指针;
}
< / style>
< / head>
< body>
< div class =left>
< div class =draggabledraggable =trueondragstart =drag（event）>可拖曳元素< / div>
< / div>
< div class =right>
< / div>
< script>
function drag（ev）{
ev.dataTransfer.setData（text，foo）;
}
< / script>
< / body>
< / html>
看起来相关，因为它正在讨论位置相对是罪魁祸首。但是这已经有近两年的历史了，并且已经有了固定的报道，所以这一点很可能已经融入了Chrome。有没有其他人遇到过这个问题，如果是的话，你采取了哪些步骤来修复它？ 解决方案
出现在铬63.0.3223.0（见问题）。
根据问题追踪程序，这个问题应该在几周后在下一个chrome stable版本（64.x）中解决。
请注意，此修补程序已在Chrome Canary中提供。
更新25-01-2018
Chrome 64现已推出
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?
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
这篇关于当使用位置粘贴/固定时，Chrome会切断幻影图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
