This is one of those things that took me so long to figure out, but when I finally got to the bottom of it I didn't have anyone to share in my victory. I suppose that's exactly what this page is for. Allow me to share a little victory that took me an afternoon of scratching my head.

The Setup

I have been having fun with SVG and CSS animations creating some soup pot animations for Souper Bowl of Caring's website. This lead to me changing out the TypeKit loading animation from just a boring GIF loading image to an animated soup pot.

TypeKit, you say?

I have really loved working with TypeKit, but was annoyed at the little delay where the fonts are displayed as the backup font before the JavaScript is loaded all the way. Following a link on their page, I included the following SASS:

$ease-out: opacity 1s ease-out;
.wf-loading {
	* {
		opacity:0;
	}

	background: url("../img/icons/ajax-loader.gif") no-repeat center center;
	height: 100%;
	overflow: hidden;
}
.wf-active *,
.wf-inactive * {
	-webkit-transition: $ease-out;
	-moz-transition: $ease-out;
	-o-transition: $ease-out;
	transition: $ease-out;
}

TypeKit adds a .wf-loading class to the body and then removes it when it's loaded. With the added animation, this means the screen starts white with the loading animation, then fades in over one second once loaded.

After writing some some SASS libraries to animate the soup pot in various ways, I just swapped out the ajax-loader.gif line for a @include soup-pot(); mixin call. Everything looked great. Easy, right?

The Issue

I started noticing something strange. Certain pages were no longer loading in Chrome. Firefox would be fine. IE would be fine. But certain pages which never gave us a problem before would suddenly cause Chrome to start spitting "Out of Memory" errors. I had made a few other changes throughout the site, but nothing that should have been affecting performance. Changing the loading animation seemed to have really been my only drastic change. Unfortunately, the error was strange enough that it didn't lend itself to Googling. I couldn't even get the Inspector loaded to see what part of the page was loading and what wasn't before it would run out of memory.

The Investigation

I did the normal stuff: I slowly rolled back changes until I could get output. I noticed that the errors seemed to crop up most on larger pages. Not obscenely big or anything, but admin-specific pages that wouldn't be optimized for lots of folks viewing. A page with a long table documenting each week over two years, or an organizational chart chronicling the work history of 15-20 employees. Initially I thought Chrome just suddenly became overly-sensitive to longer HTML files, but I felt like I could view larger pages on other sites. I would go through step of the code placing exit("I MADE IT THIS FAR!"); along the way, and it would make it all the way to the end of the code, but when I let the page render in full... it would crash.

The Discovery

Finally I worked my way back to the front page CSS I added. I couldn't figure out why that would mean anything, but I started commenting out bits to see if anything helped. Sure enough, the page would load if I lost the .wf-loading bit.
.wf-loading {
	* {
		opacity:0;
	}

I had copied that bit over from the example, but I realized that it the "*" was making every single element inside of .wf-loading invisible, which meant it was animating every single element on the page to reappear. It seemed like I'd only need to make the direct descendants invisible to still achieve the same effect.

So I tried:
.wf-loading {
	> * {
		opacity:0;
	}


This time when I hit refresh, the page loaded instantly!

Success!

Not only did the problem pages load, but I realized the rest of the site was loading much faster as well. I hadn't realized I'd been bogging myself down this whole time with unnecessary animation. Furthermore, I realized that Chrome is a big baby when it comes to CSS animations, and Firefox can handle them like a pro.

I was so excited to have such a great success after wracking my brain all afternoon... and then realized that no one I work with would care the slightest about such a mundane problem.

I figured I'd type it out here to at least relive the excitement of telling someone about my victory.