HTML reload vs. link click: Javascript fade-in of content flashes

i have a really small but annoying problem on my webpage.

On default I’m hiding parts of my webpage by setting opacity: 0; to it. I’m using the jQuery Plugin Pace to “preload” my contents. Once pace is done I’m applying a class to the body that sets the hidden parts to opacity: 1; again – with a transition.

What I also do is e.preventDefault() on regular link clicks, fade-out the content and use location.href to jump to the links target after a short timeout – in order to let the fade-out animation finish. Essentially just a smooth fade-in and fade-out of my page when navigation through it.

The link-clicks look something like this …

    $internalLinks.on('click', function(e) {
        e.preventDefault();
        var _this = $(this);

        $('body').removeClass("page, pace-done"); // fade-out the contents
        $('#header').addClass("slide-up"); // slide up the header
        setTimeout(function() {
            location.href = _this.attr('href');
        }, 150); // let the css transition of the page finish
    });

However I have the problem that on some browsers (Safari on Mac for instance) on some pages the content flashes really shortly on page-load and only then fades-in. But you can see it flash.

And I can’t seem to find the cause for this!

  1. My stylesheet is one of the first things loaded in my so, all elements that have opacity: 0; on them are hidden on page-load.
  2. If I manually “refresh” a page (i.e. CMD-R) the flashing effect never happens.
  3. Only on some pages if I click a link on a page the content fades out, shortly flashes, then white page again and then fades-in as I want it to.

What could be the cause for this short flash? I’ve already looked into my css and js to find any things that couls cause this and tried to debug as much as I could but with no success.

Thank you in advance.
Matt


Source: css

Leave a Reply