CODEWITHSUNDEEP
jquerygoogle-chromesafariflickerpageload
Nick
Nick

Reputation: 4462

Pages flashing white in Safari on loading or reloading content unnecessarily

I am wondering what might be causing the page flashing white briefly when I am navigating from page to page on a website I am designing in Safari (you can see the website here). In addition to this flashing sometimes happening, the logo and nav bar are reloading as well (fading in and out briefly) when they should stay static. In Firefox this is what happens, but in Safari (mostly) and Chrome occasionally I am seeing flickers and reloading. I am using this script to fade in the content div (i.e. everything below the nav bar) on non-mobile devices, but this doesn't appear to be the culprit as I have tried commenting out the script and still see the behaviour:

<script>

$(document).ready(function(){

    if ( screen.width <= 699 ) {
    } else {
         // your script
    document.getElementById('content').style.display = "none";
    $('#content').fadeIn(1000);
    }

});
</script>-->

I am wondering what else I can try to get a smoother transition. It was working fine before, but now is not for some reason. I have a very good internet connection.

Thanks for any help,

Nick

Upvotes: 3

Views: 5538

Answers (2)

Sparky
Sparky

Reputation: 98748

I'm not seeing the white flash although I can understand why it might be happening: Your page is loading #content, then your JavaScript is hiding #content, then your JavaScript is making #content fade back in.

$(document).ready(function(){

    if ( screen.width <= 699 ) {
    } else {
         // your script
    document.getElementById('content').style.display = "none";
    $('#content').fadeIn(1000);
    }

});

By the way,

document.getElementById('content').style.display = "none";

...can be replaced with...

$('#content').css('display', 'none');

...which is "roughly equivalent" to .hide()...

$('#content').hide();

...then combined with the next line (called chaining)...

$('#content').hide().fadeIn(1000);

But that does not solve the white flashing problem.

So why not try making #content hidden by default in CSS...

#content {
   display: none;
}

And simply use the JS to fade it in...

$(document).ready(function(){

    if ( screen.width <= 699 ) {

    } else {
         // your script
        $('#content').fadeIn(1000);
    }

});

Of course if I knew what exactly you were trying to achieve, I'd be able to make a better recommendation.

EDIT:

CSS:

#content {
    display: none;
}

@media screen and (max-device-width: 699px) {
    #content {
        display: block; 
    }
}

JavaScript:

$(document).ready(function(){
    $('#content').fadeIn(1000);
});

Upvotes: 3

Damen TheSifter
Damen TheSifter

Reputation: 911

you are rendering it , hiding unhiding it, yo are also mixing js selection and jquery selection ,why not use css to have it hidden.

//css
 #content {display:none;}
// use media query for css detect mobile
@media only screen and (max-device-width: 480px) {
#content {display:block;}
}

//js
$(document).ready(function(){
    $('#content').fadeIn(1000);

});

Upvotes: 1

Related Questions