webkit | freestyle developments

I started using chrome as my main browser. What was holding me back was that the webkit developer tools for a long time just weren’t as good as Firebug. Now they are almost on a par. So I’ve been using Chrome as my main web browser for coming up to two months now and for the most part it has been a fantastic experience. Chrome is just lightning fast, from startup to rendering to javascript performance. I don’t have any benchmarks, but everything just feels really "light".

This could be because I’m coming from Firefox with three plugins installed: Firebug, Web Developer Toolbar and Adblock Plus…but I get the feeling that if I disabled the Web Developer Toolbar and Adblock Plus, Firefox still wouldn’t feel as light. Anyway, this isn’t why I started the blog post. I really wanted to vent a couple of frustrations I have with the browser. Seemingly minor frustrations that could probably be fixed really easily. Here they are:

I can’t change the default font or page background colour or if I can, I can’t find where I do it. I change the default font and background colour from black to dark red and from white to grey respectively so that when I build websites I remember to set a default font and background colour in my reset
It is really hard to save a 1×1 pixel image from a website to my desktop. I have to pinpoint the exact pixel on the screen and right click on it. I haven’t figured out an easier way of doing this…if there even is one
When saving an image using the network tab of the developer tools the filename becomes "download" and _not_ the filename of the image I am saving
Lastly, no out-of-the-box RSS support. I really miss it, and I love Firefox’s implementation of it in the bookmarks bar. N.B. I realise there is a plugin.

I was recently asked to quote for a proof of concept HTML5 alternative to a flash carousel, specifically to run on iPad. I said I’d do it, but the agency later decided that others had tried to create a HTML5 version and had not been able to create a version that performed well enough for the client. From my point of view they were under the impression I couldn’t do any better. So naturally, I spent a few hours of my spare time proving this wrong, just for the fun of it.

Step 1 was to build a version of the carousel in HTML5. I chose to use the jQuery framework because…well, I felt like it. The fruits of my labour are here:

http://freestyle-developments.co.uk/demo/public/portsurf/

Now, you can view this on any browser. All that is happening is that there are a set of list items absolutely positioned in a container, when you click/touch an item on the left/right jQuery animates the top, left, width, height and opacity CSS values for each item.

Fantastic, but, it feels really sluggish on iPad and iPhone 4. Go on, try it out.

Fair enough, they are resource constrained devices. What to do though? I’ve already used all the tricks I could think of fast loops, select operation caching etc. etc. So what now?

Luckily, in iOS, transitions and animations of the -webkit-transform and opacity properties are performance-enhanced. Sweet! These correspond exactly to the two CSS properties I’m trying to manipulate for each item in my carousel. Implementation was a simple case of swapping out the jQuery animate function, for the css function. Passing in the webkit transition, webkit transform and opacity values in its place.

For example:

items[itemIndex - 3].css({
	opacity:1,
	'-webkit-transform':'translate3d(' + carousel.itemPosition.medium.left.x 
            + 'px, ' + carousel.itemPosition.medium.left.y + 'px, 0) scale(0.5)',
	'-webkit-transition':'opacity 0.4s linear, -webkit-transform 0.4s linear'
});

The webkit transition property is saying “transition these CSS properties from what they were previously to their new values, using these transition parameters (0.4s linear)”. The webkit transform property is saying “move this element to the following coordinates, and scale it by a factor of 0.5″.

Check out the hardware accelerated version on your iPad/iPhone and compare it with the other:

http://freestyle-developments.co.uk/demo/public/portsurf/?ha=1 (Note: webkit only)

Here is a video demonstrating the performance differences those of you without iPads.

freestyle developments

Tag Archives: webkit

Chrome

Hardware accelerated alternative to jQuery animate() top, left, width, height and opacity CSS properties for iPhone/iPad