Surfin' Safari turns up new 3-D HTML5 tricks that give Flash a run for its money

Seth Weintraub
|
July 19, 2009
|
Share

If you head over to Surfin Safari, Webkit's blog of new features, you'll find some neat new HTML5 3-D tricks that Safari 4 (including the latest Webkit builds and Mobile Safari on the iPhone) can do without breaking a CPU sweat.  We had our doubts (and still do to a degree) but this is the kind of animation that makes Flash seem a little less ... "necessary". 

In a non-scientific test, running Morphing Power Cubes, the browser used 5% of the CPU.  Flash usually starts at around 30% just to be activated.  These examples also run incredibly smooth on the iPhone and iPod touch. 

Other interesting examples (Make sure you are using a recent Webkit build or Safari in Snow Leopard): Poster Circle, Perspective, Transform Style...and our favorite: Morphing Power Cubes

 

 Here's another fun one.  ChromeExperiments hosts many more (thanks commenter).

Comments (15)

ipodrulz (not verified) | July 19, 2009 - 10:25pm

Seeing this on the iPhone is most impressive... it runs much smoother than you think.

9to5Mac Noob (not verified) | July 19, 2009 - 10:34pm

Die flash!

Darkfire (not verified) | July 19, 2009 - 10:50pm

Flash is toast.
Too late Adobe, you had a good run.

Oh, and PS - SL will be next. Better be quick.

k. (not verified) | July 20, 2009 - 1:02am

hmm, I am using Safari 4.0.2 on a mac, but all I see is some shapes in 2D. For example, morphing cube layers are stacked on top of each, and just rotating. Here are some screenshots: http://img193.imageshack.us/gal.php?g=picture4daa.png
also cpu on my mbp dual core 1.83 goes up to 98%. Do I have to switch smth. on or off for it to work, or there is some problem with my safari?

Jaryd (not verified) | July 20, 2009 - 1:14am

I believe you have to be running Safari 4 in Snow Leopard, using one of the latest Webkit nightlies (in Leopard or Snow Leopard), or running it on Safari in iPhone 3.0 to see the HTML 5 stuff.

I can confirm that Safari 4.0.2 on 10.5.7 does not work.

Jaryd (not verified) | July 20, 2009 - 1:14am

I believe you have to be running Safari 4 in Snow Leopard, using one of the latest Webkit nightlies (in Leopard or Snow Leopard), or running it on Safari in iPhone 3.0 to see the HTML 5 stuff.

I can confirm that Safari 4.0.2 on 10.5.7 does not work.

9to5Mac Noob (not verified) | July 21, 2009 - 6:45am

works fine for me

k. (not verified) | July 20, 2009 - 1:40am

Thanks, problem solved. I was running 4.0.2 on 10.5.7. I somehow missed the part that I need latest webkit build, and not the latest safari.

9to5Mac Noob (not verified) | July 20, 2009 - 2:01am

look like a magic

9to5Mac Noob (not verified) | July 20, 2009 - 3:47am

I know... Windoze... but Safari on Windoze still uses around 50% of the CPU for these animations...

Looks great on the iPod touch!!!

9to5Mac Nob (not verified) | July 20, 2009 - 4:15am

These are cool, but Google Chrome can do them too (most of them, anyway) and has its own dedicated site to these types of 'non flash' animations etc: http://www.chromeexperiments.com/

Check it out - its pretty amazing considering no flash was used.

9to5Mac Noob (not verified) | July 20, 2009 - 6:21am

Maybe that has something to do that Google Chrome is also using webkit as HTML engine? ;-)

9to5Mac Nob (not verified) | July 20, 2009 - 4:17am

These are cool, but Google Chrome can do them too (most of them, anyway) and has its own dedicated site to these types of 'non flash' animations etc: http://www.chromeexperiments.com/

Its pretty amazing considering no flash was used. Flash can go die in a hole.

9to5Mac Noob (not verified) | July 21, 2009 - 7:20am

What question? Well the question as to why there has been no Adobe Flash support in the iPhone browser?

dicklacara (not verified) | July 21, 2009 - 9:06am

Some of these examples show differences (problems) when running on the iphone. Some I've noticed:

-- slider control doesn't display on iPhone
-- activate mike control doesn't display on iPhone
-- drawing doesn't work on iPhone, it pans the screen instead

The browser running on the computer uses the kb & mouse for input and the display for output. On the iPhone the mouse and display are one.

For this to be truly device-independent that standard controls will need to be developed that work with a browser on a computer and a browser on a touch screen.