Skip to main content

Bug Tracker

Side navigation

#13861 closed bug (notabug)

Opened May 06, 2013 05:58PM UTC

Closed May 06, 2013 07:09PM UTC

Flash of White on page loads

Reported by: chrisdnilsson@gmail.com Owned by:
Priority: undecided Milestone: None
Component: unfiled Version: 1.9.1
Keywords: Cc:
Blocked by: Blocking:
Description

I'm using jquery UI in a Wordpress plugin. The issue is that it is causing the entire page to reload on every click rather than keeping the header, background, sidebar, etc on the page and just reloading changed elements. It's like the browser can't cache page elements.

I'm using Wordpress 3.5.1 and this thread seems to indicate that the compatibility issue appeared in 3.2 but I cannot confirm.

In my testing I found that JQuery 1.8.16 does not exibit this behavior. 1.8.17+ (including 1.9+ and 1.10+) both suffer. After comparing the change log between 1.8.16 and 1.8.17 I narrowed the issue down to a new function that was introduced to test for jquery fraction support. This function creates a hidden "fake" body element and then attempts to manipulate it testing for fractional support. This function (with minor changes) exists in all versions from 1.8.17 forward. Remove this function and the flash of white on page loads dissapears...

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;
})();

Here is the current version in 1.10.3 beginning on line 12474

//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 );
})();

You can see the issue on my site http://icafe.lcisd.org/

Click any menu item to see the flash of white.

I've testing in IE8+, FF, Chrome on Win7 and FF, Safari on Mac Mountain Lion

Attachments (0)
Change History (3)

Changed May 06, 2013 07:04PM UTC by timmywil comment:1

resolution: → fixed
status: newclosed

Upgrading jQuery should fix the issue. That code has already been changed back to deferring the tests requiring a body until document ready.

Changed May 06, 2013 07:08PM UTC by scottgonzalez comment:2

resolution: fixed
status: closedreopened

This code is actually in jQuery UI, not jQuery core. Could you please file an issue at http://bugs.jqueryui.com/newticket ? Thanks.

Changed May 06, 2013 07:09PM UTC by scottgonzalez comment:3

resolution: → notabug
status: reopenedclosed