Does WebKit use OpenGL to render CSS transitions?

Question

Does WebKit use OpenGL to render CSS transitions, or does it use software rendering?

Coffeecolored

Answer 1

WebKit is just a frontend. It depends on the backend and the hardware support. Google Chrome uses skia as a back-end and it can use software or hardware. So the answer is it depends on the implementation of the back-end and the hardware it is running on.

Paletot

Answer 2

From what I know the only hardware accelerated property using transitions is the translate3d transform.

Eg:

// Normal
div{
    -webkit-transition: all 0.5s ease-out;
}

// Adding class to animate
div.transformed{
    -webkit-transform: translate3d(100px, 100px, 0);
}

If you use just the translate transform or animate any other property it won't be hardware accelerated.

Ichnology

I should note that this is true for Safari/Mobile-Safari, some other implementations might not be HW accelerated at all or have better support for it. – Ichnology

All transitions are HW accelerated (using OpenGL) in Safari regardless of the property/transform. You can see that because of initial flickering & different font rendering in certain circumstances. Also, the transitions couldn't so smooth especially in Mobile Safari if HW acceleration was not used. – Timeless

Actually there's evidence that hardware acceleration is only used with translate3d and not with translate, one of the reasons for this difference is because translate was implemented in Safari a lot sooner than translate3d. – Ichnology

There are some webpages that make reference to the difference in performance between these two: link, link search for translate3d, link. I've tested this and the difference is noticeable specially on iOS, although hw-acceleration is kind of buggy and uses more resources. – Ichnology

Thanks Mario. The links are partly outdated (the first one mentioning IOS 3.0), though no doubt I was oversimplifying above. I think we can safely assume that in most (webkit) platforms most of the stuff is HW accelerated, and it's getting better all the time. – Timeless

No problem, yes HW acceleration is being implemented slowly, although some of them are very buggy or have issues on mobile devices because of limited resources. I had to change most translate3d transitions on a web app because it had visual glitches on iOS 5, some elements were being rendered badly (pixelated). Sadly there's no precise documentation on HW acceleration for HTML and on what platforms it is being supported. – Ichnology