gpt4 book ai didi

javascript - Chrome 在使用位置粘性/固定时切断重影

转载 作者:可可西里 更新时间:2023-11-01 12:57:17 25 4
gpt4 key购买 nike

我正在尝试使用 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/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com