0

I have a script that works great on desktop. On page/window scroll it triggers a function and that function fades images in when they are within a certain distance from the top of the screen. This, however is not working on Safari for mobile. As near as I can tell it isn't even calling the function, let alone loading the images. Testing on Chrome mobile, does seem to work fine.

After many attempts, this is where I settled for now (still not working):

function scrollStart () {
    console.log("scrollStart");
    $(".placeholder").each(function (e, o) {
        var a = o;
        var d = a.querySelector(".img-small");
        var n = new Image();
        var l = new Image();
        var c = $(window).scrollTop();
        var s = $(a).offset().top;
        var t = s - c;
        if (!a.classList.contains("loaded")) {
            n.src = a.dataset.large;
            l.src = d.src;
            if (t <= 720) {
                l.onload = function () {
                    d.classList.add("loaded");
                };
                n.onload = function () {
                    n.classList.add("loaded");
                    a.classList.add("loaded");
                };
                a.appendChild(n);
            }
        }
    });
}
$(window).scroll(scrollStart);

As far as my attempts to catch a scroll with Safari mobile, I've tried touchmove, touchstart, and various others (with and without event listeners). I'm guessing I just haven't hit the right syntax or configuration.

CSS:

.placeholder {
    background-color: #f6f6f6;
    background-size: cover;
    background-repeat: no-repeat;
    position: relative;
    overflow: hidden
}
.placeholder img {
    position: absolute;
    opacity: 0;
    top: 0;
    left: 0;
    width: 100%;
    -webkit-transition: opacity 1s linear;
    transition: opacity 1s linear
}
.placeholder img.loaded {
    opacity: 1
}
.img-small {
    filter: blur(50px);
    /* this is needed so Safari keeps sharp edges */
    -webkit-transform: scale(1);
    transform: scale(1)
}
figcaption {
    z-index: 1;
    padding: .75em .75em .65em .75em
}
.featureStory img, .normalStory img {
    outline: none
}
#newsAndStoriesGrid .expanded{
    margin-top: 0em !important;
}
.featureStory figcaption, .normalStory-inside figcaption {
    bottom: 0px
}

Thanks in advance!

ipsomatic9
  • 23
  • 1
  • 6
  • Maybe this can be helpful https://stackoverflow.com/questions/2863547/javascript-scroll-event-for-iphone-ipad – Sinisa Bobic Jan 30 '18 at 13:57
  • @SinisaBobic I've tried the code on this page many times. I plan to do so again, however there just seems to be SOMETHING that I'm missing. Any other help would be much appreciated. – ipsomatic9 Feb 01 '18 at 14:44
  • can I see it somewhere so I can debug it? – Sinisa Bobic Feb 01 '18 at 19:07
  • @SinisaBobic https://calvin.edu/home/indextest.html – ipsomatic9 Feb 01 '18 at 19:35
  • hmm just tried on iPhone 7, iOS 11.2.5 and working good, will try to reproduce it on some other way... in meantime try with $(document).on("scroll", scrollStart) instead of $(window).scroll(scrollStart) and tell me does it giving better result? – Sinisa Bobic Feb 01 '18 at 20:18
  • This now seems to be working as I had it originally. Got me. – ipsomatic9 Feb 07 '18 at 19:33

0 Answers0