谷歌浏览器中的错误位置粘滞？答案

【问题标题】：Bug in google chrome with position sticky?谷歌浏览器中的错误位置粘滞？
【发布时间】：2018-03-19 08:41:44
【问题描述】：

作为一名网络开发人员，我真的很喜欢在 chrome 上进行开发。现在我注意到一个位置错误：在 Google Chrome 浏览器上粘着。定位的粘性元素行为不正确，这意味着：一切似乎都很好，直到您将鼠标悬停在粘性定位元素上，它不会对交互等做出反应（同样 JavaScript 函数不会在点击时触发）

我也在 Mozillas Firefox 上对其进行了测试，它可以正常工作。

它的位置（相关元素的）是粘性的，但它的行为是错误的！

这个问题有什么解决办法吗？

【问题讨论】：

显示演示问题的minimal reproducible example 代码。
请分享您的一些代码。
我遇到了类似的错误。它在 Chrome PC 上运行良好，但在 Chrome Mac 上运行良好（有时它是可悬停/可点击的，有时它不是并且点击通过）。
不幸的是，这对于 stackoverflow 来说可能不是一个好问题。它可能应该在此处作为错误提交：crbug.com/wizard（您应该首先查看此处的说明：chromium.org/for-testers/bug-reporting-guidelines）。也就是说，我也遇到了这个错误。不幸的是，它在一个非常复杂的应用程序中，但我会尝试并创建一个简单的重现并报告错误。
其实好像被举报了：bugs.chromium.org/p/chromium/issues/detail?id=827224

【解决方案1】：

如果有人好奇，这可能是 chrome 中的一个错误：

该问题在 Chrome 68 中已修复（截至 2018 年 4 月 17 日尚未发布），但是，如果粘性元素的容器具有填充，则还有另一个错误：

【讨论】：

在Chrome 69 (and Opera 56) 中对于偶然发现此问题的任何其他人来说仍然是一个问题? 注意：我的容器有填充，并且元素是一个选择字段，所以可能是#834054。
如果您在旧版本的 chrome/chromium（68 之前）中努力使粘性 div 行为正确，有一个奇怪的解决方法：将粘性 div 的 contentEditable 设置为 true，然后返回 false . jsfiddle.net/w40bnLt5/2
但据我所知，解决 834054 问题的唯一方法是避免填充容器

【解决方案2】：

现在，flex 容器中的位置粘性在 Chrome 中可以正常工作，如果它在您的情况下不起作用，可能会有解决方案：

由于弹性盒元素默认为拉伸，所有元素的高度相同，不能滚动。

将align-self: flex-start 添加到粘性元素将高度设置为自动，允许滚动，并修复它。

目前所有主流浏览器都支持此功能，但 Safari 仍然落后于 -webkit- 前缀，除 Firefox 之外的其他浏览器在 position: sticky tables 方面存在一些问题。

【讨论】：