Bug 69091 – Background bleed avoidance has performance impact

• Status: NEW
• Component: Layout and Rendering

[Hin-Chung Lam]

To avoid background bleeding for radius border the current best approach is to create a transparent layer to paint background and border, clipping is done at the end. While this works all the time it has performance drawback and on some sites this makes scrolling very slow.

There are several bleeding avoidance approaches currently in use, each of them as drawback.
1. Shrink background by 1 device pixel.
   Only works is border width >= 2 and all borders are present and non transparent. There are a lot of restrictions in using this method.

2. Paint to transparent layer and then clip.
   Works very well but slow.

We should derive other methods that can work around the performance issue.

[Hin-Chung Lam]

I've tried the following methods and none of those are satisfactory:

1. Shrink background by 1 pixel when border width is 1.
   There are "holes" between the background and inner border.

2. Treat opaque borders as background-clip: padding-box and use BackgroundBleedNone.
   Background still bleeds.

3. Treat 1 border as BackgroundBleedNone.
   Nope, it still bleeds.

I'm trying to implement the idea described in determineBackgroundBleedAvoidance() but I suspect it will have the same problem as (1), and there will be holes between background and inner border. I'll experiment with this and verify.

[Simon Fraser (smfr)]

> some sites this makes scrolling very slow

Please give examples.

[James Robinson]

(In reply to comment #0)
> To avoid background bleeding for radius border the current best approach is to create a transparent layer to paint background and border, clipping is done at the end. While this works all the time it has performance drawback and on some sites this makes scrolling very slow.
> 

Are you talking about the skia antialiased clipping logic, or something in the cross-platform WebKit code?

[Hin-Chung Lam]

Created attachment 109485 [details]
Sample test for the performance problem

Here's a test case for the performance problem.

[Hin-Chung Lam]

(In reply to comment #4)
> Created an attachment (id=109485) [details]
> Sample test for the performance problem
> 
> Here's a test case for the performance problem.

(In reply to comment #3)
> (In reply to comment #0)
> > To avoid background bleeding for radius border the current best approach is to create a transparent layer to paint background and border, clipping is done at the end. While this works all the time it has performance drawback and on some sites this makes scrolling very slow.
> > 
> 
> Are you talking about the skia antialiased clipping logic, or something in the cross-platform WebKit code?

This is in the cross-platform WebKit code: http://trac.webkit.org/browser/trunk/Source/WebCore/rendering/RenderBox.cpp#L910

[Simon Fraser (smfr)]

Are you saying this affects Gmail?

[Hin-Chung Lam]

(In reply to comment #6)
> Are you saying this affects Gmail?

Yes, on the tablet. It's an development version that uses -webkit-box-shadow and border-radius. The performance problem was most prominent during scroll.

[Radar WebKit Bug Importer]

<rdar://problem/10231216>

[Deepak Mittal]

Even when we try to shrink the layout rect by 1 px that also does not fix all the issues..
I am still getting few test case failed in the layout test ..