position：选择选项时粘滞跳跃

Question

我正在尝试使用css样式，position：sticky。除了select元素变为活动状态时，它才能正常工作。页面滚动回粘性元素的位置。

<div style="position: sticky; position: -webkit-sticky; top: 0;">
    <select>
        <option>Option</option>
    </select>
</div>

https://codepen.io/anon/pen/vrxVoy

我在网上找不到任何可以解决此问题的内容。有没有人遇到这个问题并有解决方案？

谢谢！

浏览器：Chrome 67.0.3396.79

操作系统：Windows 7家庭高级版。

Sticky在Firefox中正如预期的那样。

找到错误报告：https://bugs.chromium.org/p/chromium/issues/detail?id=805800#c9

Answer 1

问题是因为它应用于表单元素。当您单击元素时，如果它的基本位置在屏幕外，则浏览器被编程为转到它的位置。 Firefox的编程方式不同，只有当元素本身在屏幕外时才会这样做。

要解决此问题，请尝试使用position:fixed;。由于元素之上没有任何内容，因此没有理由使用sticky。