Skip to main content

Search and Top Navigation

#9274 closed bug (invalid)

Opened May 06, 2013 07:22PM UTC

Closed May 23, 2013 08:59AM UTC

Last modified March 24, 2015 07:57PM UTC

Position: Feature test causes white flash on all page loads

Reported by: chrisdnilsson@gmail.com Owned by: chrisdnilsson@gmail.com
Priority: minor Milestone: none
Component: ui.position Version: 1.10.3
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 (6)

Changed May 06, 2013 07:25PM UTC by chrisdnilsson@gmail.com comment:1

The Wordpress thread I refered to in the first paragraph can be found here http://wordpress.org/support/topic/flash-of-unstyled-content-white-flash-on-page-load?replies=41

Changed May 07, 2013 01:42AM UTC by tj.vantoll comment:2

_comment0: It's a hit or mess but I definitely see the referenced flash: http://jsfiddle.net/tj_vantoll/EPtFu/.1367891139145368
component: ui.coreui.position
status: newopen
summary: White flash on all page loads with WordpressPosition: Feature test causes white flash on all page loads

It's a hit or miss but I definitely see the referenced flash: http://jsfiddle.net/tj_vantoll/EPtFu/. Also verified this on another site. Simply adding jQuery UI is enough to cause it.

Changed May 09, 2013 02:03AM UTC by tj.vantoll comment:3

owner: → chrisdnilsson@gmail.com
status: openpending

I thought I saw this earlier, but I've been trying to narrow this down to recreate the problem and I'm having a lot of trouble.

chrisdnilsson@gmail.com: What were you doing to test this that you were able to narrow it down to the feature test in position? If you could provide a reduced test case showing the issue it would go a long ways to help us look into this.

Thanks.

Changed May 23, 2013 08:59AM UTC by trac-o-bot comment:4

resolution: → invalid
status: pendingclosed

Because we get so many tickets, we often need to return them to the initial reporter for more information. If that person does not reply within 14 days, the ticket will automatically be closed, and that has happened in this case. If you still are interested in pursuing this issue, feel free to add a comment with the requested information and we will be happy to reopen the ticket if it is still valid. Thanks!

Changed March 24, 2015 03:23PM UTC by ChrisWhatever comment:5

I came across this ticket because I have the same issue. Here is the information you requested:

here is a reduced test case (as reduced as i can make it):

http://googoobachoo.de/TransitionTest.html

I did not use jsfiddle as it refused to even run my javascript.

In jsBin the page would go to white and then just stop: http://jsbin.com/muqeqadori/2/

Here is a video of the issue appearing in different browsers:

https://youtu.be/BVTJam2oluY

Tested with:

Chrome Version 41.0.2272.101 m (white flash, but only sometimes)

Safari 5.7.1 (white flash, but rarely)

Firefox 36.0.1 (white flash every time)

Internet Explorer 11 Version 11.0.9600.17691 (no white flash)

Changed March 24, 2015 07:57PM UTC by scottgonzalez comment:6

The position utility no longer does an upfront support test, so this shouldn't happen with the current code.