While working on a client project today, I decided to add some nice CSS transforms to add a richer experience for those who choose to use one of the more up to date browsers (Safari, Chrome, Firefox 4). I chose to use the hardware accelerated 3D transforms for both Safari and Chrome, and the standard 2D for Firefox 4. Only to be stumped as whenever the animations started to take place, the header and footer for the site would flicker like a broken down TV throughout the animation until it was done in Safari, but not in Chrome. Not cool. So the first thing I did was search Google for an answer, clicking right away on the first Stack Overflow post I saw.

The first answer seemed like the wrong approach, having to add -webkit-transform-style: preserve-3d to every element and having the browser transform all the elements to a 3D state which would seemingly add more work for the browser. Not good, next answer.

The next answer was thought out more and seemed a bit more logical. Although for my build, both the header and footer have a fixed position. Header to the top, footer to the bottom, both of them pinned to the full width of the browser, no wider so it didn’t make sense as to why it was still flickering when the answer said it will happen if the elements are wider than the window itself.

The first approach I took was just to take out the header and footer CSS to see if it’d still flicker. It stopped! So something within the CSS must be causing this. I added the styles back in and only kept the styles for the actual wrapper for both the header and footer, still no flickering, so I was on the right path. After adding all the CSS back in and digging some more, I noticed the navigation, logo and some footer links had text-indent: -999em;. Taking this out preserved the header and footer completely during the animation and had no flickering. So I found the problem, the text itself was adding onto the headers width in the browsers eyes.

In the end, the simple fix was to add span tags around the text that I was negative indenting and hide that specifically rather than using text-indent all together. You probably wonder why I go into great depth on such a simple problem, but this has happened to be quite a few times before, and it is great relief that I know now what was causing it and how to fix it. I hope anyone who has had this problem before or are currently dealing with it find this article so you can move forward in your development and keep on making awesome things.

I’ve created a simple example for you to check out and see what happens. Simply roll over the rounded square in the middle of the page and let the flickering begin. Remember, only for Safari does this happen.

Another thing to keep in mind, is it also only happens if you have z-index on the parent element where the text is overflowing. I created another example to demonstrate this, the only difference between the 2 examples is this one doesn’t set a z-index on the header, which prevents it from flickering. Although for this build, heavy z-indexing is required.

On a project we’re working on now, we need to place “pins” on a map. There are some advantages for us not implementing the map with Flash. Namely, the project has a Facebook app component and Facebook requires users to click to activate Flash on profile tabs. I was curious to see how many pins I could instantiate in the DOM before there was noticeable chug. I made a test script that creates a bunch of img elements in the DOM. You can try it out here: DOM Capacity Test.

Through some not very scientific testing, I found that 100-300 DOM elements is my sweet spot (though IE really needs it towards the low end of that range). Any higher and the browser noticeably chugs during rendering. I was surprised that once rendered, the browser didn’t seem to perform any worse during scrolling or resizing. Another thing I noticed was that Firefox visually added each element to the page iteratively (taking much more time), whereas all other browsers immediately showed all of them after the initial CPU churn.

I was wrapping up on a project, and the time came where the color on the lists (1, 2, 3) needed to be different colors than the actual <li> inside needed to be. The only solution is to wrap any content inside the <li> with some sort of tag to target the text to change the color. Although that has no problem at all, what if this needs to be site wide? It will be very cumbersome to remember, let alone do it to every list you create.

I decided to use JavaScript to search for every <ol> and for every <li> inside of it, then it goes ahead and wraps it in the selector that changes it back to default color. In this case its a <span>.

This is what it does, this will be the before HTML:

<ol>
   <li>Item text goes here</li>
   <li>Item text goes here</li>
   <li>Item text goes here</li>
   <li>Item text goes here</li>
</ol>

And, after the JavaScript does its thing:

<ol>
   <li><span>Item text goes here</span></li>
   <li><span>Item text goes here</span></li>
   <li><span>Item text goes here</span></li>
   <li><span>Item text goes here</span></li>
</ol>

Here is the JavaScript:

window.onload = function () {
   var li = document.getElementsByTagName('ol');
   for(i=0;i<li.length;i++) {
      if(li[i].childNodes[1].nodeName == 'LI') {
         var li_count = li[i].childNodes.length;
         for(b=0;b<li_count;b++) {
            li[i].childNodes[b].innerHTML = '<span>'+li[i].childNodes[b].innerHTML+'</span>';
         }
      }
   }
};

Here is the CSS:

.container ol {
	padding: 8px 10px 8px 25px;
	list-style-type: decimal;
	color: #c19203;
	font-weight: bold;
	}
	.container li {
		padding: 4px 0;
		}
	.container ol span {
		font-weight: normal;
		color: #333;
		}