在Safari元素出现在页面上的错误位置

Question

我在Safari上遇到了一个非常奇怪的问题。我有一个菜单，当用户在视口下方滚动时固定在屏幕顶部，并在滚动事件中附加以下功能：

  function menuFix() {
     if ( $$('body').pick().hasClass('project') ) {
                return;
            }

            var el = $$('.menu').pick(),
                scroll = window.getScroll(),
                scrn = window.getSize();
            if ( scroll.y >= scrn.y ) {
                el.setStyles({
                    'position':'fixed',top:'0',
                    '-moz-box-shadow': '0 10px 6px -6px #ccc',
                    '-webkit-box-shadow': '0 10px 6px -6px #ccc',
                    'box-shadow': '0 10px 6px -6px #ccc'
                });
            } else {
                el.setStyles({
                    position:'',
                    top: '',
                    '-mox-box-shadow': '',
                    '-webkit-box-shadow': '',
                    'box-shadow': ''
                });
            }
        }

.menu的默认设置为：

.menu {
    position: absolute;
    top: 100vh;
    width: 100%;
    height: 6rem; 
}

在Chrome和Firefox中，效果很好。在Safari中，我有一个非常奇怪的问题。如果向下滚动，菜单将固定在视口的顶部。但是，如果向上滚动，特别是如果以某种速度向上滚动，菜单将被固定在错误的位置。它看起来像这样：

我认为这可能与我使用相对较新的vh属性有关，但当我更改上面的代码以通过更改代码来显式设置top到视口高度时：

 function menuFix() {
     if ( $$('body').pick().hasClass('project') ) {
                return;
            }

            var el = $$('.menu').pick(),
                scroll = window.getScroll(),
                scrn = window.getSize();
            if ( scroll.y >= scrn.y ) {
                el.setStyles({
                    'position':'fixed',top:'0',
                    '-moz-box-shadow': '0 10px 6px -6px #ccc',
                    '-webkit-box-shadow': '0 10px 6px -6px #ccc',
                    'box-shadow': '0 10px 6px -6px #ccc'
                });
            } else {
                el.setStyles({
                    position:'',
                    top: scrn.y,                // changed line to explictly set viewport height
                    '-mox-box-shadow': '',
                    '-webkit-box-shadow': '',
                    'box-shadow': ''
                });
            }
        }

我遇到了同样的问题。实际上，当我在Safari的开发工具中突出显示该元素时，它会将亮点放在元素应该的位置周围，而不是元素实际出现的位置！它看起来像这样：

任何人都知道这里会发生什么？这看起来很漂亮！