I am working on my personal website and upon arriving at my website, "Welcome." is displayed, then it fades out, then my main content fades in (super basic). This feature works on every browser I've tried perfectly, but not Safari. It works if I refresh my website page or click my link, but does not work if I paste my URL into the address bar. "Welcome." does not show, but everything else fades in. It just looks like the page hangs until the content fades in, not showing "Welcome." fade out.

I have tried multiple different strategies (like waiting for different DOM events to trigger).

I am using jQuery for my fade in and fade out, here is the js:

$(window).on("load",function () {
    $('#first').imagesLoaded({ background: true }, function () {
        $("#welcome").fadeOut(1500);
        setTimeout(function () {
            $("#content").fadeIn(1300);
        }, 1430);
    });
});

I wait for the window objects to load, then I wait for my background image to load (very large even after compression) before I execute any of the fading. This works beautifully everywhere, every time, EXCEPT when travelling to my site from another site on Safari by URL in address bar.

Here is the CSS:

body {
    display: grid;
    place-items: center center;
}

#content {
    display: none;
}

#welcome {
    font-size: 5em;
}

I expect Safari to display "Welcome.", fade out "Welcome.", fade in main content. Instead, it hangs for a second, then fades in my main content.

It works when you click the link, but does not work when you paste the URL into the address bar: https://jake-chambers.github.io

0 Answers