Open Bug 1157484 Opened 9 years ago Updated 2 years ago

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

Categories

(Core :: Layout, defect)

defect

Tracking

()

Tracking Status
firefox40 --- affected

People

(Reporter: mstange, Unassigned)

References

(Blocks 1 open bug)

Details

(Keywords: perf)

Attachments

(1 file)

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)
Attached file testcase
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.
I don't think we know that.
Severity: normal → S3
You need to log in before you can comment on or make changes to this bug.

Attachment

General

Created:
Updated:
Size: