My Webpage Loads, Then Immediately Disappears. In Chrome Dev Tools, There Are No Bad Requests.

The Page is: https://www.steveodell.co/kotuprinting.html This happens on multiple different browsers. Anyone know what's going on?

Solution 1:

My guess

In https://www.steveodell.co/assets/js/all.js You have:

$("body").imagesLoaded(function(){
    $(".page-loader div").fadeOut();
    $(".page-loader").delay(200).fadeOut("slow");
});

Instead of '.page-loader' you should fade out '.loader'

Experiment

Go to:

https://www.steveodell.co/kotuprinting.html

Press: Shift+Ctrl+I, select Console and write this at the ">" prompt as a one big line:

$(".page-loader, .page-loader div").fadeIn(1000); $(".loader, .loader div").fadeOut(3000);

Possible solution

Find in your HTML where you have the file assets/js/all.js Make a copy of that file somewhere else so you could back it up, just in case.

Find those lines close to the top:

// Page loader

$("body").imagesLoaded(function(){
    $(".page-loader div").fadeOut();
    $(".page-loader").delay(200).fadeOut("slow");
});

And change it to:

$("body").imagesLoaded(function(){
    $(".loader div").fadeOut();
    $(".loader").delay(200).fadeOut("slow");
});

That is - change .page-loader to .loader in two places.

Scrolling

If you enter the Console and enter this code:

$('.page-loader, html').css({overflow:'auto'});

it seems to be ok. If so, then somewhere in the CSS (or JavaScript) you are setting overflow of html to scrollbar and overflow of .page-loader to hidden.

Ok, I think I've found it - in file assets/css/style.css you have:

html{
    overflow-y: scroll;
    -ms-overflow-style: scrollbar;
}
html, body{
    height: 100%;
    -webkit-font-smoothing: antialiased;
}
.page{
    overflow: hidden;
}

Try changing it to:

html{
    overflow-y: auto;
    -ms-overflow-style: scrollbar;
}
html, body{
    height: 100%;
    -webkit-font-smoothing: antialiased;
}
.page{
    overflow: auto;
}

(Change to auto in two places.)

I hope it helps.

Solution 2:

In Firebug, the main element after the body tag in hierarchical form had a style="display: none". This however was not included in the HTML page. Thus it supposes that you included this via jQuery. Please review your code if you applied a fadeOut() effect to that element