Flash of Unstyled Content in Cart

adam

I'm running into a strange problem.

Whenever I hit the update button in my cart, I get a quick flash of the the cart without any CSS.

It's really jarring because I've changed the cart background to black, so it flashes the screen white. I don't want to give anyone a seizure. :P

I have no idea what could be causing this, so if anyone has any idea, Id really appreciate it.

Thanks!

luke · September 2009

Hey adam, thanks for posting. We've spent a lot of time on this issue and haven't been able to figure it out yet. We think it might have something to do with the latest version of jQuery or with our latest CSS, but we're still doing research on it. Something about the page is not being evaluated correctly so the browser reloads the page. We're hoping to figure it out by the next release and, if we can, port the fix backwards as well.

A-P · January 2010

Any update on this? It's the one thing keeping me from going above 0.5.0

luke · January 2010

Hey A-P. We were actually just talking about this the other day saying we hadn't seen it in a while. If you haven't already, you may want to create yourself a test store and try it out. We've had a lot of different people look into this and we have yet to find a reproducible reason for it.

oskay · January 2010

I see it every time, if you change quantity in the cart and hit refresh, FF/Mac.

fortuity · January 2010

Just to confirm, I've seen this on FF/Mac as well.

A-P · January 2010

Happens for me in FF/Win and IE8 in my test store. I got rid of all other javascript on the page and I'm still seeing it. Not sure what else to try.

ChuckTrukk · January 2010

What happens if you set your thickbox iframe, and thickbox <body background="000"> directly instead of loading it via css? It's a hack but may work.

A-P · January 2010

Same thing. I wonder why it's happening only for a select few of us?
It's only on 0.5.1 and 0.6.0, so I have to think the jquery update is the culprit...

luke · January 2010

Occasionally I've seen this error, though I'm not sure if it's related:

Error: document.body is null
Source File: ...../v/0.6.0/jquery-1.3.2.min.js
Line: 19

It might be a jQuery related issue but we've yet to pinpoint the problem. Definitely frustrating. Other research I did a while back seemed to point to a bug in FireFox where it would start to evaluate the page and run into some kind of error and reevaluate the page again. Not sure if that makes sense either. We'll be devoting some solid research time into this bug soon because it's definitely annoying.

brett · January 2010

I'd put my money on it _not_ being a jQuery issue, but I've been wrong before. Like when IE6 was hard crashing because of a CSS issue. Luke, at the time believing CSS to be somewhat of a dark art, was convinced it was the CSS. I thought it was impossible.

So I have been wrong. Once

And I'm wrong in every domestic dispute I've ever been involved in, even when I'm right.

Back on topic... Yes, we're definitely aware of the issue. My current thought is that it's related to memory limits on some regular expressions we're doing, but that also seems odd. Part of the problem is that it happens so inconsistently. Does anybody have a site that this is happening on consistently? All of my test sites seem to be fine at the moment, unfortunately.

brett · January 2010

Is anybody seeing this either on their checkouts, or on their carts _outside_ of the Thickbox?

oskay · January 2010

Never.

brett · January 2010

I could swear that I've seen this happen on the checkout in some of my testing stores, but I'm not seeing it now outside of the Thickbox... If that's the case, at least we have another direction to explore. Has anybody else seen this on the checkout or a non-*box cart?

bjbk · January 2010

Yup, I integrated the cart with jquery tools and got the nude flash then too...

brett · January 2010

@bjbk, you got the flash inside the Thickbox or using another *box or standalone?

bjbk · January 2010

I had the iframe straight into overlay, no thickbox. I'll reproduce it for you when I get a chance this week

brett · January 2010

@bjbk: Please do. If we can narrow this down it'd be great, but if it's not an iframe or Thickbox issue then we'll try not to go down that rabbit hole.

bjbk · January 2010

@brett: Heres a little testing suite with a few different variations. All of them give me the unstyled flash.

From first glance, I'm pegging it to the loading of /themes/standard/styles.css in the popup. Is it being loaded later in the file or something like that? Have you tried embeding that stylesheet inside the popup inline, instead of as a linked stylesheet?

[edit]Altering the style call from being linked to inline in the template fixed it completely for me, I've updated the test suite with two versions that work (vanilla and with overlay).

brett · January 2010

What's weird is that with inline styles it still flashes, it's just not completely unstyled. I see a layout flash wrt the update/checkout buttons. You seeing that? It looks like it's the exact same flash from a positioning point-of-view, but the rest of it is styled...

What I am definitely _not_ seeing is a flash on the cart page when it's loaded on its own, as opposed to inside a modal iframe. @bjbk are you seeing the flash outside of the *box?

bjbk · January 2010

You are right, it still "flashes" but isnt that just because when you click update it is effectively reloading the page? Ah I see what you mean where the update/checkout buttons flash a different position. Interestingly I only see that inside the modal window not the checkout.

To answer your other question though, I am seeing the flash on the cart page just as much as I'm seeing it inside the modal box in the vanilla versions (I've added a cart link to the test to help). It could be that my connection speed is slower than yours, and so I see the naked stuff a little longer than you do though...

Alright, so it seems that flash you were seeing where the update/checkout buttons jumped around was because their inline element styles weren't being applied as soon as the embedded styles in the head were (not sure why...). I added one of the element styles of "display:inline-block;" to their embedded styles in the head, and there is no longer a visible jump. There is still a blank page on reload, but there is no style flash anymore. Checkout those last two versions and see what you get.

@brett: something else wierd I'm experiencing on the test site is that the cart information seems to carry across from the vanilla one to the inline styles one, but it doesnt carry back. For example, if I add a product to the vanilla version, and edit it to be three, and then add a product to the inline styles version, it will be four (no matter how many I had there). If I change the inline styles version to 2, and add another product to the vanilla version, it will be four as you'd expect. If I add another product to the inline styles version, now it is five. Actually, the two inline styles versions dont add products at all. If you keep adding a product, it doesnt keep adding products to the total quantities. I think I'm missing something obvious here...

brett · January 2010

Huh... interesting on the inline-block. Nice catch, hand't thought of that. Will have to look into fixing that in our next release to prevent that jumping.

As far as the mixing of carts go: If you're sharing a naked domain (example.com) with multiple subdomained stores like you are then the sessions get weird. You can use the 3ld javascript linked to from the wiki if you need. It's an issue of where the cookie is being set.

So... you're still seeing the _unstlyed_ flash on both modal and standalone? I definitely am not, but if you are then the modal isn't likely the issue... hrmph...

bjbk · January 2010

On vanilla yes. Try choking your connection with a download and view the cart then.

bjbk · January 2010

Just to add to the party, I see this on the checkout as well (no customisations, all vanilla)

A-P · January 2010

As a temporary fix, I've added this code to my cart template: http://www.learningjquery.com/2008/10/1-way-to-avoid-the-flash-of-unstyled-content

brett · January 2010

@A-P: How are you applying that fix to your cart? I'd love to see.

Huh. I think I might have just solved this... That'd be neato. We're testing. Unfortunately it involves moving some JS around in the <head> so it's not something we can do in v060, and it's not really something we can give to you all to see (since our dev environments are private)...

@bjbk or anybody else interested: The fix (at least, it seems to me to work thusfar in my testing) is to move the <script> element that starts with function fc_PreventCheckout() from after the </title> (after the jQuery load) to before the </body>. Moving the js that manipulates the DOM to after the CSS apparently makes Firefox behave a little more gentlemanly. At least, that's what I'm seeing so far, using the Throttle Firefox plugin (which seems a little buggy) to make it more pronounced. If anybody wants to copy off the HTML and experiment with their own carts please feel free, and let us know if you see the same result (loading without the FOUC).

bjbk · January 2010

Oh interesting! I don't have time to test it out now, but I hope it is it!

A-P · January 2010

In my css vile i have

.js #flash {display: none;}

I have my cart template setup like this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">;

<html xmlns="http://www.w3.org/1999/xhtml">;
<head>
	<title>^^store_name^^</title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
	<link rel="stylesheet" href="https://^^store_domain^^/themes/standard/styles.css"; type="text/css" media="screen" charset="utf-8" />
	<link rel='stylesheet' href='http://64.13.228.58/static-files/foxycart.css' type='text/css' media='screen' charset="utf-8" /> 
	<script type="text/javascript">
	$('html').addClass('js');
	$(document).ready(function(){
		$('html').removeClass('js');		
	});
</script>
</head>
<body>
	^^cart^^
</body>
</html>

I'm definitely going to try moving that js around! Thanks for the heads up.

lott · February 2010

@A-P: I want to thank you for posting your solution. It worked great for me. I really appreciate it. That flash of unstyled content in FF has been driving me crazy.

kanjigirl · February 2010

I tried A-P's suggestions - adding this right before </head>

<script type="text/javascript"> 
$('html').addClass('js');
$(document).ready(function(){
$('html').removeClass('js');
});
</script>

And this to my .css: .js #flash {display: none;}

But I'm still getting the flash when making changes in the modal box. Where and how do I apply #flash to an element in the content? This is the page with the checkout template:

http://www.strikemodels.com/products/cannon-test/

brett · February 2010

I'm not sure how that works but with the #flash I think you'd have to wrap the whole content in a div#flash or something. But I don't know, so perhaps somebody who's tried it can chime in. I just think that a step was left out, because without some sort of #flash element I don't think it'd actually do anything.

Howdy, Stranger!

Categories

Flash of Unstyled Content in Cart