Working with CSS3 can be fun but it can also be amazingly frustrating

November 27th, 2011

I recently decided to redesign my site and the main CSS3 effect I want to use works great in Webkit browsers but not so much in Firefox, at least not yet. I know you’re thinking, wait, what about Opera or IE? Well, over 80% of my visitors are Chrome or Firefox users, so I figure I’ll make sure it works in there first and I’m pretty sure it will work in IE10 whenever that’s released. And I’ll get around to Opera, I swear!

Imagine this, I’m working along, getting this idea I have to work in Chrome, but the site I saw that inspired my idea only works in Chrome. And then I see that CSS3 3D transforms now work in Firefox 10. So I start messing around and seeing I can get this to work in Firefox. I’m using CSS3 tranforms, but I’m using JavaScript to set the CSS and the first thing I discover is that while the Webkit version makes sense:

1
el.style.webkitTransform = ‘translateZ(-400px);

The Firefox version does not. You’d think it would be this:

1
el.style.mozTransform = ‘translateZ(-400px);

But it’s not. That won’t work, you have to capitalize the m:

1
el.style.MozTransform = ‘translateZ(-400px);

I only found this out be Zachary Johnson did some digging and as far as I can tell, this is the only mention out there about how to properly write it. Problem solved now, right? I mean all the demos using CSS3 for Firefox that have translateZ working fine. But my test still wasn’t working and in fact I wasn’t even sure you could use CSS transition on the translateZ property in Firefox. It turns out you can but not if the CSS property is set as an inline style with JavaScript, which is needed for my idea to work properly. So the transition works right if it’s CSS but not if it’s JavaScript powered in Firefox. And in Chrome, it works both ways.

I’m still going to redesign my site because even though the 3D effect will only work in Chrome, at least right now, I’ll still get a fade in and out effect in the other browsers. The main traffic going to my site is web designers and developers and since over 40% of them use Chrome, a decent amount of visitors will site the site the way I intend them to. I’m sure Firefox will add the missing functionality sooner than later, so I’m not too worried about them missing out.

Cutting edge effects are pretty sweet, but you better have the patience to deal with the differences between browsers. Nothing can be more frustrating than when something isn’t working because the browsers use different syntax.

Leave a Reply

Your email address will not be published. Required fields are marked *