Sunday, July 12th, 2009

3D CSS Effects with Safari on Snow Leopard

Category: CSS, Showcase, WebKit

<p>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!

Related Content:

Posted by Dion Almaer at 4:43 pm
22 Comments

++++-
4.3 rating from 45 votes

22 Comments »

Comments feed TrackBack URI

That is a really cool demo, and I think it demonstrates the power CSS could have if the standards bodies let it. Apple has enough sway to get other vendors adopting new technologies, and has a good track record submitting their extensions to become standards; the new browser “wars” have opened up the possibility of seeing stuff like this across the board within just a few years. Let’s hope Microsoft keeps listening.

Comment by eyelidlessness — July 12, 2009

I’m trying it out on Leopard with the latest WebKit nightly, and it is surprisingly smooth even there.

It slows down during loading, and the animation gets a little choppy when you stop somewhere (longer animations seem to perform worse). There are some differences between this demo and the video (see note about drop shadows, also the zoomed image seems substantially smaller than in the video).

I also tried it in my hybrid Safari 4 Final/Beta (Beta chrome around Final’s WebKit), and it performs much worse, and lacks the 3D pivoting.

It’s really cool to see Safari constantly improving so rapidly. Very exciting.

Comment by eyelidlessness — July 12, 2009

IE will be catching up soon. It’ll probably have the canvas tag by IE10, so don’t get all cocky.

Comment by Nosredna — July 12, 2009

LOL

Comment by eyelidlessness — July 12, 2009

Comment by bogphanny — July 12, 2009

<me style=”color: impressed;” />

Comment by bogphanny — July 12, 2009

O3D.

Comment by Darkimmortal — July 12, 2009

> Let’s hope Microsoft keeps listening.

We don’t have to hope anymore. What we, the developers, need to do is keep pushing the web forward, by implementing these new technologies on our sites and webapps, and enticing our users to switch to REAL modern browsers if they want a better experience.

By doing this, WE will pave the way to a modern Open Web.

It’s too late now for Microsoft to keep the web chained into proprietary closed systems (like ActiveX and Silverlight).

I have a very real sense that now Microsoft has no option but to follow — follow Open Web pioneers such as Mozilla, Google and Apple.

(But, to be consistent, Apple needs to adopt royalty-free codecs like Theora Vorbis).

Can I back up my “real sense” with facts?
Yes I can:

“IE all together holds only a 54.4 percent market share [...]”
http://www.techcrunch.com/2009/07/05/since-march-internet-explorer-lost-114-percent-share-to-firefox-safari-and-chrome/

iPhone Drives More Than 40 Percent of Mobile Web Traffic
http://www.pcworld.com/article/165760/iphone_drives_more_than_40_percent_of_mobile_web_traffic.html

Introducing the Google Chrome OS
http://googleblog.blogspot.com/2009/07/introducing-google-chrome-os.html

Comment by andysky — July 12, 2009

A little correction:
implementing these new technologies on our sites and webapps”
should actually be:
using these new technologies on our sites and webapps”

Comment by andysky — July 12, 2009

@andysky – Good luck convincing all those companies to offer an experience only a percentage of their visitors can have. I can see it now, “Hey Boss! I want to code this really cool thing on our website that only 30-40% of our visitors can see!” I’m sure that’s an excellent way for that company to make money.

And I don’t see how a browser company implementing its own proprietary features into its own browser is considered part of the “Open Web”. All this is doing fracturing everything unless one browser company can convince all the others that their idea is the best one. For an example of how that works in real life, look at the HTML5 standards group.

And I’m confused, when Flash started offering this fancy graphical stuff everyone hated it because it was confusing and disorienting to the user. Now it’s part of the “Open Web” and it’s suddenly ok? Does that allow for the return of the Flash only site without complaints?

Although, I admit some of the fancy things the modern browsers are adding to CSS is nice and will be rather handy. I, for one, want a proper way to rotate elements on the page (even 2D rotation would be nice) without having to resort to images. But I don’t care for the programming language aspects of CSS that are being done. That’s what Javascript is supposed to be for.

Comment by travisalmand — July 13, 2009

When IE put the XHR object in IE they were evil. Until of course the other browsers adopted it and now it is cool. When they put downloadable fonts they were evil. Until now everybody else has done it. Now it is cool.

IE added more advanced effects with CSS (remember the filter attribute) and they were again evil. Now Safari is doing the same thing and they are treated like Jesus walking on water.

The double-standard is getting tired.

Comment by eric2 — July 13, 2009

O.M.G.I.G.P. (from the motion sickness ;)

Comment by btn — July 13, 2009

@Darkimmortal

Your absolutely right, its just a matter of time until someone ( maybe someone reading this) starts a movement where in an organized group of webmasters set aside one day to display pop alerts to users of IE informing them of the fact that IE is not a standards compliant browser and may not be supported in the future. I think its also fair to inform then that its an overall security risk and it’s been linked to cancer, conservative values and incest.

– these statements have not been evaluated by the FDA and may patently false

Comment by sourceRoot — July 13, 2009

“But I don’t care for the programming language aspects of CSS that are being done. That’s what Javascript is supposed to be for.”

Understood, but I prefer that in CSS. Having JavaScript being woken up on a timer to do incremental animation seems crazy to me. Do it in CSS where it’s part of the guts of the browser. As long as you can control the animation from JavaScript, that’s what I want. And with the css animation callbacks, that’s what’s being implemented.

Comment by Nosredna — July 13, 2009

The BIG difference here between Apple and Microsoft is that Apple has been submitting these CSS extensions to the W3C to become standards. While all Microsoft has been doing is adding these kind of stuff to Silverlight.

CSS 3D Transforms Module Level 3
http://www.w3.org/TR/css3-3d-transforms/

That’s why Apple is being a key player in the Open Web and, for now, Microsoft is not.

Comment by randomrandom — July 14, 2009

@travisalmand:
You need to learn your sh*t:

CSS3 2D Transforms
http://www.w3.org/TR/css3-2d-transforms/

CSS3 3D Transforms
http://www.w3.org/TR/css3-3d-transforms/

CSS3 Transitions
http://www.w3.org/TR/css3-transitions/

CSS3 Animations
http://www.w3.org/TR/css3-animations/

Comment by randomrandom — July 14, 2009

@randomrandom – wow, that’s rude. Every one of those links points to a document of the working draft. I am quite aware of the items in the working draft. It is a working draft, therefore if any browser currently supports those features it is most likely by proprietary CSS for that browser. That’s why we get -moz and -webkit for those features.

And I’m sure you know this, which makes your comment all the more rude.

What I want is a finished version of CSS3 that applies for all browsers. I’m not a big fan of creating pages that only a percentage can view correctly, as I thought I had made clear in my previous comment. If you are happy with the features as they are currently implemented, good for you. But you shouldn’t insult people just because they choose not to use them in their current form.

I apologize that my current opinions and job do not allow me to be as cool as you.

Comment by travisalmand — July 14, 2009

> What I want is a finished version of CSS3 that applies for all
> browsers.

You need to learn your sh*t. You are complaining about Apple, but the ONLY company that hasn’t implemented some of those CSS3 Drafts (like 2D Transforms) is Microsoft. Mozilla has implemented some and is in the process of implementing the rest of them.

Apple is doing its share here. By implementing, specing and submitting to the W3C. So, why are you complaining about Apple in your 1st post?:
> I don’t see how a browser company implementing its own
> proprietary features into its own browser is considered part
> of the “Open Web”. All this is doing fracturing everything

You need to learn your sh*t: By implementing these CSS extensions and submitting them to become standards, Apple and Mozilla are “pushing the web forward” to use andysky’s words.

Microsoft has the only major browser without SVG and CSS 2D Transforms (for example) — and you are blaming Apple?

> For an example of how that works in real life, look at the
> HTML5 standards group.

You need to learn your sh*t: HTML5 mostly documents how browsers already behave. This means that if enough browsers implement some spec, it pretty much will be adopted by HTML5/6. So how exactly is it wrong for Apple and Mozilla to be adopting these extensions? How exactly is what these companies are doing “not working in real life”?

> And I’m confused, when Flash started offering this fancy graphical
> stuff everyone hated it because it was confusing and disorienting
> to the user.

You need to learn your sh*t — Most web developers hated it because:
- Flash is on top and separate of the Web’s standard technologies and completely different from HTML + CSS + JavaScript
- With Flash, basically you aren’t interacting with the browser, but with the Flash engine — so, many standard behaviors of the browser are changed or don’t work — this confuses and annoys the user
- Flash is heavy (requires significant bandwidth)
- Flash sometimes crashes the browser
- Flash sometimes makes the computer really slow
- Flash has lots of versions and the web developer can’t be sure that the user is using the most recent version

And some other developers hated it because:
- Flash requires the installation of a plugin
- The Flash plugin is property of a single company
- Flash doesn’t work well on Mac and Linux (or at least many sites which use Flash)

(BTW, some of these may no longer apply.)

> wow, that’s rude

You need to learn your sh*t — You are blaming me of being rude, when your 1st post seems pretty rude to me too. Psychologists would call it “projection”. ;)

A suggestion, at the risk of sounding rude one more time: Stop complaining. Or, in regards to having more CSS features implemented in all major browsers, complain about 1 company: Microsoft.

In regards to HTML5, Microsoft almost hasn’t contributed at all to the process. Both Mozilla and Apple have been contributing plenty. Google too, of course.

> I apologize that my current opinions and job do not allow me
> to be as cool as you.

Apologies accepted. …Wait, now I’m being insolent like you in your 1st post. — How does it feel? How do you feel like responding? Would you answer like I did before? Probably not as harsh, but do you understand why I did it? I hope so.

About your current opinions — hey, you can always change ;)

If you already knew about those Drafts, cool — from your post, it sounded like you didn’t.

Isn’t the world an interesting place? Who is/was more rude and insolent — me or you? Does it matter?

Comment by randomrandom — July 15, 2009

@randomrandom – I’m at a total loss of words. Almost anyway. Yes, you are rude and continue to be rude. So here’s an attempt to comment on your points.

>You are complaining about Apple
I was not complaining just about Apple. I can see that it appears that way since I commented on a post about Apple’s product. Maybe I should have mentioned the -moz extensions in my first comment and not my second. I’m complaining about ALL of the browser companies that are incapable of getting together and agreeing on anything. Hence my example of the HTML5 body that does more bickering and grandstanding than anything. Yes, I believe it is good that Apple submits to the CSS3 working draft. Yes, I believe it is good when anybody submits to the CSS3 working draft. But how about they get their act together and make it a proper standard without proprietary extensions that then can be used as leverage to get Microsoft to follow suit?

> HTML5 mostly documents how browsers already behave.
If HTML5 just documents how browsers already behave then we don’t need HTML5 since we already have it. And I didn’t complain about browsers implementing HTML5 before it is standardized, did I? The reason being is that I can put in a video tag and it’ll work on any browser that supports that tag, if I choose to do so. We do not have moz-video or webkit-video tags do we? Proprietary extensions to CSS is not as friendly since it would require using CSS that does not apply across most browsers without doubling or tripling up. Internet Explorer has its own proprietary extensions as well which is included in my complaints. Again, I am not in a position that I can use proprietary features that only a percentage of my visitors can use.

> Most web developers hated it (Flash) because:
About Flash, you say some of your examples may no longer apply. I would say most if not all no longer apply and have not for some time. Most of your complaints focus more on the Flash developer and not the platform itself. All of the standards that people are accustomed to on how a website works can be done in Flash. Your complaints that Flash can crash the browser and can make the computer slow; I’ve seen the same thing with Javascript. You complain about Flash versions and then insult me about complaining about proprietary features on different browsers? Yes, Flash is a plugin, so what? I seem to see a great deal of products for the Flash platform that are not made by Adobe and lately Adobe is slowly going the open source route. I’ve not heard about Flash problems on the Mac but Linux I agree. But I have no problem with that because Linux is probably too small a market for Adobe to care about, which does not bother me in the least. I can say much the same as you about learning a certain something on Flash, but that would be rude.

> You are blaming me of being rude
Yes, you are rude. You may consider my first post rude but I fail to see how I was being rude to you. Your response and your following response are both rather juvenile even though they have interesting things to say. Simply because I have a differing opinion than you doesn’t justify your inability to have a respectful discussion concerning this topic.

> Stop complaining.
When HTML5 and CSS3 are finally standardized (whether they have features I do not like or not) and the browsers start implementing them so that one line of code works as expected across all browsers that support it (this is mostly CSS), then my opinions will change. If at that point Microsoft does not follow suit then my complaints will focus solely on it. Until then, I have my opinions. And that’s all they are, opinions.

> How does it feel? How do you feel like responding? Probably not as harsh, but do you understand why I did it?
No, I fail to understand the point of your rude comments. The discussion has been interesting, but your insults were unnecessary. As for how it feels. It is no different than most discussions on the internet that involve insults and name-calling for no apparent reason.

> About your current opinions — hey, you can always change ;)
Yes, opinions can be changed, even your opinions I imagine. That’s the good thing about opinions, they can be changed when confronted with proper reasons to do so. I don’t consider insults a proper reason to consider changing them though.

> If you already knew about those Drafts, cool — from your post, it sounded like you didn’t.
Maybe you should have determined if I had known of the drafts before insulting me? Our discussion might have had a completely different tone to it. You assumed and went ranting from there.

For an example of a proper response that disagrees with one of my opinions, see Nosredna’s comment about the programming language aspects of CSS that I made. He disagreed without being rude and actually gave a good reason for his opinion that may eventually win me over. That’s how it works.

> Who is/was more rude and insolent — me or you? Does it matter?
Yes, the world can be an interesting place. You were the rude one in this discussion, I don’t see how it can be considered any different as I have not been rude to you at any time. Does it matter? Yes, it does. It’s not much of community if everyone is always insulting each other and being rude for the simple reason of differing opinions. I wish to be a productive member of this community.

Do you?

Comment by travisalmand — July 15, 2009

@travisalmand:

Please relax. I never insulted you. “You need to learn your sh*t: ” was not an insult. It was meant to point you in the right direction. I can see, though, how you could feel insulted, and I will try to be nicer with you (and others) in the future.

> Yes, I believe it is good that Apple submits to the CSS3 working
> draft. Yes, I believe it is good when anybody submits to the CSS3
> working draft. But how about they get their act together and make it
> a proper standard without proprietary extensions that then can be
> used as leverage to get Microsoft to follow suit?

Interesting suggestion. I agree with you.

> If HTML5 just documents how browsers already behave then we
> don’t need HTML5 since we already have it.

No, we DO need it. HTML5 is meant to have ALL the browser makers implement the SAME features.

> Proprietary extensions to CSS is not as friendly since it would
> require using CSS that does not apply across most browsers
> without doubling or tripling up.

I know. But, for now, you can use SASS functions, for example, and you won’t need to repeat anything.

About Flash:
> I would say most if not all no longer apply and have not for some time.

I don’t agree.

> Most of your complaints focus more on the Flash developer
> and not the platform itself.

What “Flash developer”? The issue here is precisely that there shouldn’t have to be any “Flash developers”. Only web developers.

And the complaints don’t focus on the Flash developer. They focus on the Flash platform. That’s why Google doesn’t want Flash. Mozilla doesn’t want Flash. And Apple doesn’t want it either.

> Linux is probably too small a market for Adobe to care about

- Google Chrome OS (out next year) is based on Linux.

- 45% of Ruby on Rails developers use Linux, according to a market study. Ruby on Rails is one of the fastest growing web frameworks among developers.

- Google’s Android OS is based on Linux.

- Several netbooks and mobile phones have Linux as their OS.

I’d say the market is big enough. Adobe really should care about Linux.

Regarding the CSS3 Drafts not being finalized yet, it seems that, as usual, the W3C is dragging their feet.

Who is responsible for this? Probably Microsoft, as it is the only company there with vested interests in keeping the standard web technologies primitive.

That’s why Mozilla, Apple and Google are implementing these soon-to-be standards — they feel they need to force Microsoft to agree that the specs are ready to be finalized and implemented.

travisalmandm, there’s more in your previous post that I don’t agree with, but I’ve spent enough time already with these comments. I do hope they are of use to you and others.

Like you, I wish HTML5 and CSS3 features to be finalized soon.

travisalmandm, I never meant to offend you. And I’m sorry you felt that way. Also, I want to apologize for the times when I was harsh with you. I meant something productive and not something destructive, but I didn’t feel well at those times, so it didn’t come out right. I’m sorry.

(Please note: a lot of people can use the “randomrandom” login, so next time you see this username, it may not be me.)

Comment by randomrandom — July 16, 2009

@randomrandom – excellent, much better response. Much more useful. Although I would suggest getting your own login as sharing it can lead to… problems.

You may not return but what the heck, my thoughts.

>“You need to learn your sh*t: ”
I took it as an insult and I would imagine that most would as well. If you did not mean it as an insult then you really need to rethink how you address people. I would assume you do not speak to people that way in a professional setting? Because I would not only be fired but tossed out the door.

>No, we DO need it. HTML5 is meant to have ALL the browser makers implement the SAME features.
That’s true and I agree. But that’s not what you said.

>SASS functions
Good suggestion, it’s not for me though.

>What “Flash developer”? The issue here is precisely that there shouldn’t have to be any “Flash developers”. Only web developers.

So I guess that’ll be news to Flash developers, Java developers, Curl developers and whatever else I’m forgetting. I’m sure .Net fits in there somewhere, I’ll go with Silverlight but I would swear they fit in the web space some other way. I don’t do .Net so I can’t say for sure.

But you deflect my point, the platform is fine. Let go of your irrational Flash hate. I can make you a Flash only site that looks, loads and works just like any HTML page. If I wanted to do such a thing. Google, Mozilla, Apple; don’t want Flash? Of course they don’t, it’s the competition for their own platforms! But the market wants it and the market ultimately decides. Notice your three examples currently support Flash on their platforms.

>Linux
If Google OS comes out full steam ahead and takes a significant amount of the market then I’m sure Adobe would pay attention. Why would Adobe care about the number of Ruby developers on Linux? Linux is too fractured as a platform right now to be real competition to Windows or OS X but Ubuntu may help with that. Android will soon have the Flash platform, possibly full Flash 10 if they can get performance up to par. I doubt that personally but you never know. Netbooks with Linux, not a bid deal; http://tinyurl.com/b3lpfn. Windows has 90% market share on netbooks currently. Mobile phones with Linux, many mobile phones are Flash (Lite though) ready and Adobe is increasing that. Adobe’s real competition in mobile phones is Java (not counting iPhone) right now, soon it may be web-based technologies with releases like the Palm Pre. If Adobe doesn’t think the market is big enough for their attention then it isn’t big enough. After all, they are in the business of making money.

>Regarding the CSS3 Drafts not being finalized yet, it seems that, as usual, the W3C is dragging their feet.

Yes, they are. But Microsoft would not take all the blame, there’s plenty of blame to go around. You complain over me blaming Apple for something, yet you easily blame Microsoft. I say blame everyone involved. Every standards body for web technologies has had issues with proprietary tech, bickering and grandstanding. Look at the complaints over HTML5 to see what I mean. Even to share your point, look at Microsoft’s shenanigans over ECMAScript. That’s why the plugins are often better solutions over the “Open Web”. They are controlled by one company that makes the decisions, which can be good and bad. That’s why Flash is the feature rich plugin it is today. That’s why Silverlight has caught up with Flash in features so quickly, version 3 in less than two years. The “Open Web” will apparently take decades to agree on a freaking tag and badly needed CSS improvements. Mozilla, Apple and Google need to get their crap together so we don’t have -moz-border-radius or -webkit-border-radius and instead we get border-radius. Then we have leverage with anyone else that does not follow suit, namely Microsoft.

Apology accepted. Thank you.

Comment by travisalmand — July 16, 2009

I agree that Flash developers are mostly at fault for when Flash apps crash or lock up the browser. Simply, Flash gives more control over the system, and thereby more potential to screw things up. I encounter an order of magnitude more Javascript errors than Flash errors thought.

With regards to the popularity of Linux; It wins (hands down) on mobile platforms since its open source and lightweight. What better starting point can you have then a personalized kernel for your shiny new OS? That strength is also a weakness though, leading to the fractious landscape of the Linux platform (like with working drafts, nobody can decide on a standard way of doing things) that Travisalmand was talking about.

Apple and Mozilla and Opera and… all deserve a round of applause for their efforts, but at the end of the day I need to get things done, and I personally can’t afford to muck about on 3 CSS versions and 4 Javascript versions of this-week’s-web-app just because everybody has their own little bit of awesome to inject into the proceedings.

Comment by sixtyseconds — July 16, 2009

Leave a comment

You must be logged in to post a comment.