解决移动端下position: sticky; top: 0;导致上方有一丝空隙的问题

在移动端开发中，导航条的position: sticky; top: 0;应用已经很广泛，但是它有一个bug，大约是由于视网膜屏的原因，浏览器对1px的算法总有些问题，导致导航条上方有一丝缝隙，下方的内容会从缝隙中露出来。

怎么办？

曾经试过把top改成-1，但是在滑动过程中，会出现肉眼可见的导航条移动，所以否掉。

最终我的做法是给导航条设上：

.box-shadow-top-1 {
  box-shadow: 0 -1px #fff;
}

也就是用一个不对盒模型尺寸、位置产生任何影响的1像素高的阴影来覆盖掉这个缝隙，可以说没有任何副作用。