Skip to content

Instantly share code, notes, and snippets.

@ericdfields

ericdfields/gist:1022957

Created June 13, 2011 15:13
Show Gist options
  • Save ericdfields/1022957 to your computer and use it in GitHub Desktop.
Save ericdfields/1022957 to your computer and use it in GitHub Desktop.
Download ZIP
jQuery Mobile Sass for preventing flash of unstyled content when jqm is loaded outside of head
Raw
gistfile1.txt
/* Prevents flash of unstyled content as jqm loads */
body {
background: black;
[data-role="page"] {
visibility: hidden;
}
}
.ui-mobile-viewport {
[data-role="page"] {
visibility: visible;
}
}
@daniel23
Copy link

daniel23 commented Jan 9, 2012

I'm writing an iPhone app using jQuery Mobile and am experiencing the FOUC. Unfortunately, this didn't prevent the problem. Suggestions?

@ericdfields
Copy link
Author

Been a while since i used jQM. I know they're out of alpha now, which i think is what they were in when I last used it.

Off the top of my head, the trick w/ fighting FOUC is using some combination of javascript & css to hide the content that's getting styled and then showing it when styling is complete. You have to figure out your own breakpoints for what determines 'element is successfully styled'.

Best of luck.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment