So our mobile website is getting a FOUC on load and any page click. Site is m.whitewatertours.com and it happens any time an external css is added to the <head>, code here:
<link rel="stylesheet" href="twt_mobile.css">
I've tried several things like:
2) replaced <link...> with
<link rel="stylesheet" type="text/css" media="print" href="print.css">
<style type="text/css" media="screen">@import "twt_mobile.css";</style>
as suggested on this website: http://www.bluerobot.com/web/css/fouc.asp/ - still did not help
3) adding the css as an import - looks like this:
</style> - did not help
4) I read this page 2X and it is beyond my comprehension what needs to be done:
Appreciate any insight on the matter!
You could use jQuery on document load to hide the footer or other offending region for a few seconds while scripts and CSS files have time to fully load.
Example of jQuery .hide .slide & .fadeIn effects:
Went to the link and looked at the code and you have:
I am correct that this is where the fade code would be?
Without the @import url(twt_mobile.css); that I tried in #3 above - how did you get the css to not go to another source?
Thanks for your help,
If you don't have it already, this goes inside your <head> tags:
This function goes above references to CSS and other scripts in your page.
//delay, fadeIn rate in milliseconds. Use higher values for slower transitions//
Obviously, you'll need to change #header to an applicable ID in your own pages. For example, if you want to hide your #footer ID, use that instead of #header. If you want to hide a class, use .footer.
I put the code in the <head> before any css and still get the FOUC.
Tried about 3 more things and still get that blasted FOUC.
Sooo...I started a new page/site from the template again and have added both the css and footer text/images and am not getting the FOUC - working backwards so I'll post when I find the problem.