Wrong spot appears in Safari element on page

I have a very strange problem in Safari. I have a menu where when the user scrolls under the viewport it is captured at the top of the screen with the following function associated with the scroll event:

  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': ''
                });
            }
        }

      

        
        
        
      

    

Default settings in .menu:

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

      

        
        
        
      

    

This works well in Chrome and Firefox. I have a very strange problem in Safari. If you scroll down, the menu will be fixed to the top of the viewport as it should. However, if you scroll through the backup, especially if you do it at some speed, the menu is fixed in the wrong place. It looks like this:

I thought it might have something to do with my use of the relatively new vh attribute, but when I changed the above code to explicitly set top

to the viewport height, changing the code like this:

 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': ''
                });
            }
        }

      

        
        
        
      

    

I got the same problem. In fact, when I highlighted an item in Safari's dev utility, it placed the highlight around where the item should have been , not where the item appeared! It looked like this:

Does anyone know what might be going on here? It seems pretty buggy!