John Smith's Blog

Ramblings (mostly) about technical stuff

CSS3 transitions on properties which haven't been explicitly defined

Posted by John Smith on

While continuing to fiddle with the CSS and JavaScript on this blog, I noticed a rather strange behaviour whilst testing on Chrome, where the page would render differently, apparently at random. This turned out to be largely down to issues with JavaScript executing before or after CSS had been applied, but it's also shown up something unpleasant with CSS3 transitions, where it seems that the only thing consistent between browsers is that none of them do what you (probably) want...

First off, a very quick overview of CSS transitions for the uninitiated. These are a means of having smooth changes between styling property values of HTML elements, and are supported in modern browsers i.e. Chrome, Opera, Safari, and Firefox from 4.0 onwards. (Forget IE, not even IE9 beta supports them.) Here's a bit of sample code that animates a <div> when you click on it - the most relevant bits are in cyan.

<div style="position: relative; left: 50px; font-size: x-large; -webkit-transition: all 2s linear; -moz-transition: all 2s linear; -o-transition: all 2s linear; transition: all 2s linear;" id="css3-demo-click-me">Click me</div> <script> document.getElementById("css3-demo-click-me").onclick = function(ev) { = (300 - parseInt( + "px"; }; </script>

Which you can see here:

Click me

The above example should work fine on all browsers supporting CSS3 transitions, on ones which don't the text will jump immediately to the alternate position.

Now, in the example above, the left property is always explicitly defined. What happens if you try to transition a property which isn't explicitly defined at the start of the transition?

The answer seems to be, "it depends on what browser you're using". More annoyingly, no browser does what I'd think would be the expected/preferred behaviour, namely to transition from the computed value to the new value. However, Opera and the WebKit browsers transition from a zero value to the target value, and Firefox 4.0 ignores the transition altogether, jumping straight to the target value.

I've coded an example that transitions the width of some text, as you might want if you had to make some space for a new element on the right hand side of the page. Unfortunately it doesn't play well within this blog, due to the use of position: fixed; breaking the layout, so instead you'll have to look at it via this link.

The somewhat crappy solution is to:

  1. Turn off transitions on the element you're going to change
  2. Explicitly set the CSS property to the computed value, a jQueryish example would be something like $("#my-element").css("width", $("#my-element").width()) + "px");
  3. Re-enable transitions on the element
  4. Change the property to the target value
Not too bad in simple isolated cases, but I wouldn't want to do that amount of faffing around on anything complex.

I haven't looked at the official CSS3 spec to see what - if anything - is the expected behaviour in this sort of scenario, but the fact that we have browsers doing different things indicates that someone needs to fix something.

Experimental rhythm action game using HTML5 video and Safari 3D CSS3 transforms

Posted by John Smith on

UPDATE: this is currently broken on my iPad, suspect it's iOS 4.2 related. I think I might be able to do a hacky fix, but I'm still working on it. It should work OK on regular Safari though.

It's probably not the most sensible thing in the world to publicize a >10MB video file that's being hosted on an Amazon EC2 'micro' instance, but let's see how long this lasts before I take it down to avoid too much damage to my credit card...

Photo of an iPad running the game

One of the things that surprised me when I got an iPad was that in Mobile Safari, embedded YouTube videos would play within the browser, rather than launching the standalone app as they do on the iPhone/iPod Touch. (Assuming that they've been embedded using the iframe method, rather than a Flash video.) This inspired me to start playing with HTML5 video, which previously hadn't struck me as that interesting.

Unfortunately, the embedding of YouTube video in an <iframe>, coupled with the way the underlying video file URLs are uniquely signed - presumably to inhibit hotlinking - means that it's difficult to impossible to have a lot of customized interaction with the YT video itself, but by hosting the video myself, I've able to build something really, simple but (hopefully) effective.

Anyway, at is a very basic rhythm action game. It's primarily aimed at the iPad, but will work acceptably on Mac/Windows Safari. Other browsers will have mixed results, as currently none of them support the 3D transformations added into WebKit's CSS, not even Chrome. The 3D stuff is super-simple, and could probably be 90% faked using regular CSS/JS/images, but as this is purely experimental, I've not been inclined to try. If this was a serious project, I'd probably do it in Objective-C, but I was really only interested in the HTML5/CSS3 aspects.

Tweet me to let me know how much you hate it...

About this blog

This blog (mostly) covers technology and software development.

Note: I've recently ported the content from my old blog hosted on Google App Engine using some custom code I wrote, to a static site built using Pelican. I've put in place various URL manipulation rules in the webserver config to try to support the old URLs, but it's likely that I've missed some (probably meta ones related to pagination or tagging), so apologies for any 404 errors that you get served.

RSS icon, courtesy of RSS feed for this blog

About the author

I'm a software developer who's worked with a variety of platforms and technologies over the past couple of decades, but for the past 7 or so years I've focussed on web development. Whilst I've always nominally been a "full-stack" developer, I feel more attachment to the back-end side of things.

I'm a web developer for a London-based equities exchange. I've worked at organizations such as News Corporation and Google and BATS Global Markets. Projects I've been involved in have been covered in outlets such as The Guardian, The Telegraph, the Financial Times, The Register and TechCrunch.

Twitter | LinkedIn | GitHub | My CV | Mail

Popular tags

Other sites I've built or been involved with


Most of these have changed quite a bit since my involvement in them...