Sunday, July 12th, 2009
The iPhone has had these wicked cool 3D transforms hardware accelerated for awhile. We haven’t seem them in desktop Safari though, until now.
Charles Ying shows us Snow Stack:
Oh, was there some Microsoft plugin launched last week? We don’t need no stinkin’ plugin!
Charles tells us more:
- Larger images load in after 2 seconds for high quality zoomed images.
- State changes are handled via CSS.
- Reflections use CSS masks instead of a Canvas draw (standard box reflections don’t quite work yet).
- Reflections sit on a scaleY(-1.0) coordinate system and are tracked independently, which is surprisingly easy.
- This demo pushed a few performance limits and currently avoids drawing and animating a drop shadow and border.
- On Leopard, animating transforms with a transform list need to have only 1 function to animate in hardware.
- Some expensive CSS selectors are used, and haven’t been fixed yet. (in progress)
- Almost all of this is hardware accelerated on Snow Leopard. About the only thing that isn’t is the networked image loading.
- Key states are tracked manually (timers handle keyboard delay and repeats) so a smooth motion can be achieved when the keys are held down.
- Cell sizes are chosen at initial window load time and don’t change on window resize, although the origin does. It’s rather slow, however, so I may end up changing that.
- To give you a sense of the effort involved, this demo was written over 3 days, a few hours each evening.
All via @joehewitt:
Wow, Safari on Snow Leopard does hardware-acelerated CSS 3D transforms!
Posted by Dion Almaer at 4:43 pm