[CSS Blending] Blending elements can't read the entire backdrop when the accelerated scrolling is involved

• Component: CSS
• Status: NEW ---

[Ion Rosca]

Blending will be isolated by the scrollingLayer created for composited scrolling. Composited scrolling is not enabled by default in WebKit Settings.

Blending will still work, but elements having mix-blend-mode being part of the scrolling content will not be able to read the backdrop outside that scrolling content (stacking container).


If we have composited scrolling enabled and the element tree looks like:
P -> E -> B
where P has overflow scroll, then B will blend only with E, not with P, because there is an s isolating scrolling layer created between P and E:
P ->(s) -> E -> B.


More complex case is:
P -> C1  -> A
   -> C2  -> B
where:
* P is the only element creating stacking context
* B has mix-blend-mode
* C2 got accelerated because it has overflow hidden and needs composited scrolling,
* C2 it can create a stacking container (all its descendants form a contiguous block in stacking order).
In this case B will blending only with the content inside C2, excluding C2 itself. The "spec compliant" behaviour would be for B to blend with all the content behind itself inside the current *stacking context*, including P, C1 and C2 elements.