Event regions break opacity == 0 optimization, can affect layerization

NEW
Unassigned

Status

()

3 years ago
3 years ago

People

(Reporter: mstange, Unassigned)

Tracking

(Blocks: 1 bug, {perf})

Trunk
Points:
---

Firefox Tracking Flags

(firefox40 affected)

Details

Attachments

(1 attachment)

(Reporter)

Description

3 years ago
Steps to reproduce:
 1. Turn on event regions.
 2. Turn on layer borders.
 3. Load the testcase.

The text is in its own layer, instead of merging with the white page background.


Firefox Marketplace hits this with its invisible splash-overlay element, which has position: fixed; opacity: 0; z-index: 0;. It causes the whole content of the page to be put into a new (component alpha) layer.

It's probably due to this addition in nsIFrame::BuildDisplayListForStackingContext:

>  bool needEventRegions = aBuilder->IsBuildingLayerEventRegions() &&
>      StyleVisibility()->GetEffectivePointerEvents(this) != NS_STYLE_POINTER_EVENTS_NONE;
>  if (disp->mOpacity == 0.0 && aBuilder->IsForPainting() &&
>      !aBuilder->WillComputePluginGeometry() &&
>      !(disp->mWillChangeBitField & NS_STYLE_WILL_CHANGE_OPACITY) &&
>      !nsLayoutUtils::HasAnimations(mContent, eCSSProperty_opacity) &&
> -->  !needEventRegions) {
>    return;
>  }

Here's a display list dump + layers dump:

> Painting --- after optimization:
> LayerEventRegions p=0x10f82e020 f=0x10f6624a0(Viewport(-1)) bounds(0,0,0,0) layerBounds(0,0,0,0) visible(0,0,80580,43080) componentAlpha(0,0,0,0) clip()  (hitRegion < (x=0, y=0, w=80580, h=43080); >)
> LayerEventRegions p=0x10f82e0f8 f=0x10f663050(Canvas(html)(-1)) bounds(0,0,0,0) layerBounds(0,0,0,0) visible(0,0,80580,43080) componentAlpha(0,0,0,0) clip()  (hitRegion < (x=0, y=0, w=80580, h=43080); >)
> CanvasBackgroundColor p=0x10f82e1d0 f=0x10f663050(Canvas(html)(-1)) bounds(0,0,80580,43080) layerBounds(0,0,80580,43080) visible(0,0,80580,43080) componentAlpha(0,0,0,0) clip()  uniform (opaque 0,0,80580,43080) (rgba 255,255,255,255) layer=0x10f6c7000
> LayerEventRegions p=0x10f82e218 f=0x118799270(Block(div)(0) id:invisible-layer) bounds(0,0,0,0) layerBounds(0,0,0,0) visible(0,0,80580,43080) componentAlpha(0,0,0,0) clip(0,0,80580,43080)  (hitRegion < (x=0, y=0, w=80580, h=43080); >)
> BackgroundColor p=0x10f82e310 f=0x118799270(Block(div)(0) id:invisible-layer) bounds(0,0,80580,43080) layerBounds(0,0,80580,43080) visible(0,0,80580,43080) componentAlpha(0,0,0,0) clip(0,0,80580,43080)  uniform (rgba 0,0,0,0) layer=0x10f832800
> LayerEventRegions p=0x1185284c8 f=0x1187993b0(Block(h1)(2)) bounds(0,0,0,0) layerBounds(0,0,0,0) visible(0,0,80580,43080) componentAlpha(0,0,0,0) clip()  (hitRegion < (x=480, y=1286, w=79620, h=2304); >)
> Text p=0x1185285a0 f=0x1187994f0(Text(0)"Does this text get its own layer?") bounds(420,1448,25921,1980) layerBounds(420,1448,25921,1980) visible(420,1448,25921,1980) componentAlpha(420,1448,25921,1980) clip()  layer=0x10f842400
> Painting --- layer tree:
> ClientLayerManager (0x118740f00)
>   ClientContainerLayer (0x10f6c6000) [visible=< (x=0, y=0, w=2686, h=1436); >] [opaqueContent] [presShellResolution=1]
>     ClientTiledPaintedLayer (0x119168400) [not visible] { hitregion=< (x=0, y=0, w=2686, h=1436); >} [opaqueContent]
>     ClientTiledPaintedLayer (0x10f6c7000) [clip=(x=0, y=0, w=0, h=0)] [not visible] [metrics0={ [cb=(x=0.000000, y=0.000000, w=2686.000000, h=1436.000000)] [sr=(x=0.000000, y=0.000000, w=1343.000000, h=718.000000)] [s=(0,0)] [dp=(x=0.000000, y=0.000000, w=1343.000000, h=718.000000)] [cdp=(x=0.000000, y=0.000000, w=0.000000, h=0.000000)] [color=rgba(255, 255, 255, 1)] [scrollId=18] [z=2] }]
>     ClientColorLayer (0x10f6c7400) [clip=(x=0, y=0, w=2686, h=1436)] [bounds=(x=0, y=0, w=2686, h=1436)] [visible=< (x=0, y=0, w=2686, h=1436); >] { hitregion=< (x=0, y=0, w=2686, h=1436); >} [opaqueContent] [metrics0={ [cb=(x=0.000000, y=0.000000, w=2686.000000, h=1436.000000)] [sr=(x=0.000000, y=0.000000, w=1343.000000, h=718.000000)] [s=(0,0)] [dp=(x=0.000000, y=0.000000, w=1343.000000, h=718.000000)] [cdp=(x=0.000000, y=0.000000, w=0.000000, h=0.000000)] [color=rgba(255, 255, 255, 1)] [scrollId=18] [z=2] }] [color=rgba(255, 255, 255, 1)]
>     ClientTiledPaintedLayer (0x10f832800) [bounds=(x=0, y=0, w=2686, h=1436)] [not visible] { hitregion=< (x=0, y=0, w=2686, h=1436); >} [opaqueContent] [isFixedPosition anchor=(1343,718) margin=0.000000,0.000000,0.000000,0.000000]
>     ClientTiledPaintedLayer (0x10f842400) [clip=(x=0, y=0, w=2686, h=1436)] [bounds=(x=14, y=48, w=865, h=67)] [visible=< (x=14, y=48, w=865, h=67); >] { hitregion=< (x=16, y=42, w=2654, h=78); >} [componentAlpha] [metrics0={ [cb=(x=0.000000, y=0.000000, w=2686.000000, h=1436.000000)] [sr=(x=0.000000, y=0.000000, w=1343.000000, h=718.000000)] [s=(0,0)] [dp=(x=0.000000, y=0.000000, w=1343.000000, h=718.000000)] [cdp=(x=0.000000, y=0.000000, w=0.000000, h=0.000000)] [color=rgba(255, 255, 255, 1)] [scrollId=18] [z=2] }] [valid=< (x=14, y=48, w=865, h=67); >]
>       TiledContentClient (0x122de1f20)
(Reporter)

Comment 1

3 years ago
Created attachment 8596220 [details]
testcase
(Reporter)

Comment 2

3 years ago
Hmm. The opacity:0 element here does block events from reaching the page background. But scrolling over it scrolls the same scroll box as scrolling over the page background - it scrolls the page. Maybe layerization should, for event region purposes, ignore the fact that fixed position things can't merge with scrolled things? Hmm, no, that wouldn't work in some cases.

The only clean solution I can come up with would involve having a separate event region (layer) tree, and not putting event regions on the layers we use for painting. I don't know if that's a good idea.
Do we know how often we hit this sort of thing in the wild? My assumption (based on B2G code) was that in the majority of cases when there is opacity:0 stuff like this the authors also put pointer-events:none which would then prevent this extra layerization.
(Reporter)

Comment 4

3 years ago
I don't think we know that.
You need to log in before you can comment on or make changes to this bug.