Transitions in iOS Safari on iPhone causes unexpected behavior

Question

I wrote this code to let my footer fade out when scrolling down and fade in when scrolling up. It works pretty good, however, on iOS Safari on iPhone (don't have a iOS tablet so can't check) it causes the fading to occur multiple times. I've noticed the fade out happening 3 to 5 times in a row on one down-scroll. Changing the fade in/out to a slide up/down gives the same behavior.

It doesn't occur on iOS chrome on iPhone, chrome on Android device, safari or chrome on my OSX laptop. Seems to be a iOS safari related issue.

What might cause this unexpected behavior? I'm using jquery 3.2.1.

"use strict";
var prevYOffSet = 0;

$(window).scroll(function (event) {
    var yOffset = window.pageYOffset;

    if (yOffset < 50) {
        return;
    }
    if (yOffset > prevYOffSet) {
        $('#cv-nav-wrap').fadeOut(500);
    } else {
        $('#cv-nav-wrap').fadeIn(500);
    }
    prevYOffSet = yOffset;
});

The HTML code:

<div id="cv-nav-wrap" class="cv-menu center-x nav-down">
    <div id="nav-anchor"></div>
    <nav id="cv-nav">
        <ul id="cv-ul">
            <li class="cv-li">
                <a href="#info-sec">
                    <p>Information</p><img class="svg" src="img/cv-icons/cv-23.svg">
                </a>
            </li>
            <li class="cv-li">
                <a href="#skill-sec">
                    <p>Proficiencies</p><img class="svg" src="img/cv-icons/cv-15.svg">
                </a>
            </li>
            <li class="cv-li">
                <a href="#exp-sec">
                    <p>Experience</p><img class="svg" src="img/cv-icons/cv-20.svg">
                </a>
            </li>
            <li class="cv-li">
                <a href="#cd-timeline">
                    <p>Education</p><img class="svg" src="img/cv-icons/cv-12.svg">
                </a>
            </li>
            <span class="cv-stretch"></span>
        </ul>
    </nav>
</div>

This is the css belonging to the div:

div#cv-nav-wrap {
    width: 100%;
    text-align: center;
    position: fixed;
    z-index: 1000;
    bottom: 0;
    /*background: #2b2b2b;*/
    border-top: 1px dotted rgba(0, 0, 0, 0.2);
    background: #000;
    -webkit-box-shadow: 0px -4px 3px rgba(0, 0, 0, 0.1);
    -moz-box-shadow: 0px -4px 3px rgba(0, 0, 0, 0.1);
    -ms-box-shadow: 0px -4px 3px rgba(0, 0, 0, 0.1);
    -o-box-shadow: 0px -4px 3px rgba(0, 0, 0, 0.1);
    box-shadow: 0px -4px 3px rgba(0, 0, 0, 0.1);

    left: 50%;
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -o-transform: translateX(-50%);
    transform: translateX(-50%);
}

div#cv-nav-wrap::before {
    display: block;
    content: '';
}

Answer 1

I don't know what causes the behavior on safari on iOS, but I played around a bit and turns out you can fix it by delaying the transition:

"use strict";

var prevYOffSet = 0;
var didScroll = false;
var scrollDir = '';

window.setInterval(checkScrolled, 500);

function checkScrolled() {
    if (!didScroll) {
        return;
    }

    if (scrollDir === 'down') {
        $('#cv-nav-wrap').slideUp(500);
    } else if (scrollDir === 'up') {
        $('#cv-nav-wrap').slideDown(500);
    }
}

$(window).scroll(function (event) {
    var yOffset = window.pageYOffset;

    if (yOffset < 50) {
        return;
    }

    scrollDir = yOffset > prevYOffSet ? 'down' : 'up';

    if (scrollDir === 'down') {
        if (yOffset < prevYOffSet + 30) {
            return;
        }
    } else if (scrollDir === 'up') {
        if (yOffset > prevYOffSet - 30) {
            return;
        }
    }

    didScroll = true;
    prevYOffSet = yOffset;

});

Every 500ms, a function checks if there was a scroll, which direction the scroll was in and if it was an interesting scroll (at least 30px from the last Y offset). If all criteria match, transition accordingly. Feel free to finetune the millisecond and pixel values.