WebKit rendering, shadows and tiles

In this post I’ll be talking about the shadows rendering in WebKitGTK+. If you are not interested in the details skip the rest of the post, the summary is: yes, shadows are not a problem anymore in the usual cases for WebKitGTK+, and we plan to improve even more the situation.

CSS, SVG and HTML5 Canvas specifications allow to render shadows around elements. This is a small mess, as all the three standards did not pay much attention to each other when defining about the shadows API, so now we have different APIs and some confusion for the implementors. We could check it after having to solve some issues in the current blur algorithm, actually I even proposed a change to the HTML5 spec trying to help clarifying it. The main problem with these shadows is that huge boxes could add visually nice offset shadows, like what happens in identi.ca, causing huge computations to blur a big rectangle as the recommended algorithm basically approximates a gaussian blur using 3 box blurs. Gtk and Qt ports use the SVG implementation of this algorithm, coded inside WebKit because neither cairo nor Qt implement this filter; Chrome/Skia does less box blurs, it is faster but it gets poorer results in my opinion. Firefox also uses the 3 box blurs as recommended in SVG and tries to reduce the area as much as possible using clipping.

When we profiled this problem we could easily spot a couple of issues that could be solved: the algorithm is using C++ objects instead of accessing directly to the pixels to operate, and it is copying the surfaces in memory more than required. A patch fixing these issues showed a big improvement, that is nice but still not enough to get good user experience. Calculating the destination value for every pixel is still very costly for huge rectangles, so the best option seemed to be to try to avoid the blurring as much as possible instead of just improving the algorithm. The options: clipping and reducing even more using a smaller shadow to create a big one using tiling (for rectangles which are the main use case). We created both patches both patches but after the tests the result was that just the tiling one was enough to fix the main uses cases like identi.ca, even with the issues in the blur algorithm and not clipping, the reduction in those cases fixed the main issue we were trying to fix. Of course we are interested in those patches and we are working to integrate a better algorithm because we want all the shadows to work better.

By the way, our WebKit team in Igalia has defined a wiki with our goals with regard to rendering, you can check them and propose us other ideas or discuss them, we are very interested in your experience and feedback using WebKitGTK+