• I’ve been trying to solve an issue I’m having involving a flash of white when new pages are loaded. The background, header, sidebars, etc should all be cached once I’m on my site so that I can navigate from page to page without it fully reloading EVERYTHING on the page. I’ve narrowed the issue down to JQuery-UI. If I include jqueryui 1.8.16 everything works perfectly but if I load jqueryui 1.8.17 or later (including 1.9 and 1.10 branches) then I see the flash of white on all clicks within my site.
    This (very snippy) thread seems to indicate that this issue begain in WordPress 3.2 but I can’t confirm that. I’m running 3.5.1.
    After reading that other thread there are a lot of people who think the flash of white is normal and just a function of slow page loads. This is not true…content on the page that doesn’t change should not flash to white…and I can PROVE that with jqueryui 1.8.16 or earlier the flash of white IS NOT present. My issue is that I need some of the functionality that 1.9+ introduced!
    I’m going to dig into the change logs between 1.8.16 and 1.8.17 to see if I can figure this out but I wanted to get my findings so far out there in case someone else has any ideas. This issue is all over the forums but no one seems to have an answer.

Viewing 3 replies - 1 through 3 (of 3 total)
  • Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    Thread Starter cnilsson

    (@cnilsson)

    Thanks Andrew…I actually wrote the plugin that is loading jqueryUI. I’ve enqueued it and then registered it setting the footer option to true. The flash of white is less (the background color stays but the header still flashes)but the script no longer functions.

    Thread Starter cnilsson

    (@cnilsson)

    OK…I’ve found the offending bit of code in JQueryUI 1.8.17.
    It looks like they decided to do a test to see if your current version of jquery can handle fractions or not. This function creates a fake hidden body element and then tests for fraction support by manupulating this element.
    Remove this function and the flash of white goes away (of course could now have an issue with old versions of jquery).

    Here is the function in jquery 1.8.17 (beginning on line 10251)

    // fraction support test (older versions of jQuery don't support fractions)
    (function () {
    	var body = document.getElementsByTagName( "body" )[ 0 ],
    		div = document.createElement( "div" ),
    		testElement, testElementParent, testElementStyle, offset, offsetTotal;
    
    	//Create a "fake body" for testing based on method used in jQuery.support
    	testElement = document.createElement( body ? "div" : "body" );
    	testElementStyle = {
    		visibility: "hidden",
    		width: 0,
    		height: 0,
    		border: 0,
    		margin: 0,
    		background: "none"
    	};
    	if ( body ) {
    		jQuery.extend( testElementStyle, {
    			position: "absolute",
    			left: "-1000px",
    			top: "-1000px"
    		});
    	}
    	for ( var i in testElementStyle ) {
    		testElement.style[ i ] = testElementStyle[ i ];
    	}
    	testElement.appendChild( div );
    	testElementParent = body || document.documentElement;
    	testElementParent.insertBefore( testElement, testElementParent.firstChild );
    
    	div.style.cssText = "position: absolute; left: 10.7432222px; top: 10.432325px; height: 30px; width: 201px;";
    
    	offset = $( div ).offset( function( _, offset ) {
    		return offset;
    	}).offset();
    
    	testElement.innerHTML = "";
    	testElementParent.removeChild( testElement );
    
    	offsetTotal = offset.top + offset.left + ( body ? 2000 : 0 );
    	support.fractions = offsetTotal > 21 && offsetTotal < 22;
    })();

    This same function (with minor changes) has existed in ALL versions of jqueryUI up to the current 1.10.3 beginning on line 12474

    // fraction support test
    (function () {
    	var testElement, testElementParent, testElementStyle, offsetLeft, i,
    		body = document.getElementsByTagName( "body" )[ 0 ],
    		div = document.createElement( "div" );
    
    	//Create a "fake body" for testing based on method used in jQuery.support
    	testElement = document.createElement( body ? "div" : "body" );
    	testElementStyle = {
    		visibility: "hidden",
    		width: 0,
    		height: 0,
    		border: 0,
    		margin: 0,
    		background: "none"
    	};
    	if ( body ) {
    		$.extend( testElementStyle, {
    			position: "absolute",
    			left: "-1000px",
    			top: "-1000px"
    		});
    	}
    	for ( i in testElementStyle ) {
    		testElement.style[ i ] = testElementStyle[ i ];
    	}
    	testElement.appendChild( div );
    	testElementParent = body || document.documentElement;
    	testElementParent.insertBefore( testElement, testElementParent.firstChild );
    
    	div.style.cssText = "position: absolute; left: 10.7432222px;";
    
    	offsetLeft = $( div ).offset().left;
    	$.support.offsetFractions = offsetLeft > 10 && offsetLeft < 11;
    
    	testElement.innerHTML = "";
    	testElementParent.removeChild( testElement );
    })();

    I’m going to file this with jquery and see what they have to say.

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Flash of white on page loads’ is closed to new replies.