Bug 76850 – Clipping of render layer boundaries does not take page scale into account

• Component: Layout and Rendering
• Status: RESOLVED FIXED

[Sami Kyostila]

The boundaries for render layers that are descendants of clipping containers (e.g., overflow: hidden) are incorrectly stored into the compositor's overlap map. The problem is that the boundaries are in scaled CSS coordinates while the clip rects are unscaled. The result is that the overlap check sometimes fails depending on the page geometry and scale.

[Sami Kyostila]

Created attachment 123596 [details]
Patch

[Sami Kyostila]

Created attachment 123719 [details]
Patch

 - Fixed typo in changelog.

[Simon Fraser (smfr)]

Comment on attachment 123719 [details]
Patch

View in context: https://bugs.webkit.org/attachment.cgi?id=123719&action=review

It would be nice if the bug listed some real-world sites known by be broken.

> LayoutTests/compositing/overflow/overflow-scaled-descendant-overlapping.html:25
> +    <div style="position: absolute; left: 400px; z-index: 1; background: #0f0">
> +        <!-- Green should appear on top. -->
> +    </div>
> +
> +    <div style="position: absolute; left: 400px; overflow: hidden">
> +        <div style="-webkit-transform: translateZ(0); background: #f00">
> +            <!-- Red should be hidden. -->
> +        </div>

Please use 'red' and 'green' for colors, rather than hex values.

Also, use of css classes like '#indicator" makes the test self-documenting. I also don't like inline style in general.

[Sami Kyostila]

A real-world site where this happens is the mobile version eBay (http://mobileweb.ebay.com/). It has a popup ad which is placed to the bottom of the viewport using absolute positioning and some JavaScript. The page also has an image gallery with images that are positioned using CSS 3D transforms. The bug is that the popup is obscured by the gallery images despite having a higher z-index.

The bug is triggered because the popup does not get its own graphics layer unless it overlaps with another existing graphics layer. It is this overlap test that fails due to the missing page scale factor.

To make it easier to trigger the bug on that page, first set page scale > 1 and then call createAndroidAppPopup() on that page since the popup normally appears somewhat nondeterministically.

[Sami Kyostila]

Comment on attachment 123719 [details]
Patch

View in context: https://bugs.webkit.org/attachment.cgi?id=123719&action=review

>> LayoutTests/compositing/overflow/overflow-scaled-descendant-overlapping.html:25
>> +        </div>
> 
> Please use 'red' and 'green' for colors, rather than hex values.
> 
> Also, use of css classes like '#indicator" makes the test self-documenting. I also don't like inline style in general.

I've now removed the inline style defitions and rewritten the test to use CSS classes like existing tests do.

[Sami Kyostila]

Created attachment 123917 [details]
Patch

[Simon Fraser (smfr)]

Comment on attachment 123917 [details]
Patch

Much cleaner test, thanks.

[WebKit Review Bot]

Comment on attachment 123917 [details]
Patch

Clearing flags on attachment: 123917

Committed r105879: <http://trac.webkit.org/changeset/105879>

[WebKit Review Bot]

All reviewed patches have been landed.  Closing bug.