search

washingtonstateuniversity / WSU-spine

The spine that binds together wsu.edu
14 stars 7 forks source link

On initial page load, the background color on the Spine may appear short and then fill the height #378

Open jeremyfelt opened 8 years ago

jeremyfelt commented 8 years ago

This appears to be an issue only for super admins on WSUWP as the total number of DOM items is ridiculous and causes layout slowness https://developers.google.com/web/fundamentals/performance/rendering/avoid-large-complex-layouts-and-layout-thrashing#avoid-forced-synchronous-layouts

quantumJLBass commented 8 years ago

I can confirm that this is not just in the WordPress admin realm. I have to add a fix like so

#spine {
    background-color: #23282b;
}

to many of the sites I touch. This is needed to prevent this issue you describe. I have see it on many sites, from business.wsu.edu to the SSO we use via monorail. It is super dependent on the browser, bandwidth, the items between the css declaration and what may be holding up the parallel rendering of the DOM, aliens shooting lasers at it and yada yada so on and so forth.

The deal is that the :before renders slower then the div#spine and is lower in the render order so if there is anything that slows the dom render like bandwidth or a slower js file for example, then you will see the flash on even low node counts.

That is the why and how it happens, and how i fix it. Just wanted to confirm it is not just the WP admin side that it is seen.

jeremyfelt commented 8 years ago

Cool, I'm going to reopen to continue tracking this. Thanks for that info.