Permalink
Browse files

fix(ui): Eliminates FOUC in Firefox

Firefox has an unusual bug (at lease on our pages) where CSS doesn’t
block rendering, so unstyled HTML is being displayed before our CSS is
loading. Placing any non-empty script below the CSS links causes FF to
properly wait until the CSS is loaded. Here we just move the script we’re
already using below the CSS links.

Fixes #8328
  • Loading branch information...
mrclay committed May 19, 2015
1 parent 90e8fd1 commit 8244ae61959455d3511086042f0985d8d58efa94
Showing with 11 additions and 16 deletions.
  1. +11 −16 views/default/page/elements/head.php
@@ -35,30 +35,25 @@
$html5shiv_url = elgg_normalize_url('vendors/html5shiv.js');
$ie_url = elgg_get_simplecache_url('css', 'ie');
?>
<script>
<?php // Do not convert this to a regular function declaration. It gets redefined later. ?>
require = function () {
// handled in the view "js/elgg"
_require_queue.push(arguments);
};
_require_queue = [];
</script>
<!--[if lt IE 9]>
<script src="<?php echo $html5shiv_url; ?>"></script>
<![endif]-->
<?php
foreach ($css as $url) {
echo elgg_format_element('link', array('rel' => 'stylesheet', 'href' => $url));
}
// A non-empty script *must* come below the CSS links, otherwise Firefox will exhibit FOUC
// See https://github.com/Elgg/Elgg/issues/8328
?>
<!--[if gt IE 8]>
<link rel="stylesheet" href="<?php echo $ie_url; ?>" />
<![endif]-->
<script>
<?php // Do not convert this to a regular function declaration. It gets redefined later. ?>
require = function () {
// handled in the view "js/elgg"
_require_queue.push(arguments);
};
_require_queue = [];
</script>
<!--[if lt IE 9]><script src="<?php echo $html5shiv_url; ?>"></script><![endif]-->
<?php
echo elgg_view_deprecated('page/elements/shortcut_icon', array(), "Use the 'head', 'page' plugin hook.", 1.9);

0 comments on commit 8244ae6

Please sign in to comment.