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

我在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 {
    position: absolute;
    top: 100vh;
    width: 100%;
    height: 6rem; 
}

在Chrome和Firefox中，这很好地工作。在狩猎中，我有一个非常奇怪的问题。如果向下滚动，菜单将按原样固定在视口顶部。但是，如果您向上滚动，特别是如果您以一定的速度向上滚动，则菜单将固定在错误的位置。看起来是这样的：

我认为这可能与我使用相对较新的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的开发工具中突出显示元素时，它将突出显示的位置放在元素应该在的位置，而不是元素实际出现的位置！看起来是这样的：

---

有人知道这里发生了什么吗？这辆车看起来很漂亮

你能在JSFIDLE中复制这个吗？我试过了，但到目前为止我无法复制它：嗯，如果不解决这个问题，很难提供帮助。。。你有在线版本吗？这只是狩猎吗？我也面临着与你同样的问题。你怎么解决这个问题？