[css-contain] Layout containment and absolutely & fixed positioned descendants

[Manuel Rego Casasnovas]

Hi,

According to the css-contain spec [1], layout containment establishes a
containing block for absolute and fixed positioned descendants.
We have a bug report about that https://crbug.com/85212 that I decided
to fix last week as it was quite simple and straight forward:
https://chromium-review.googlesource.com/1059557

The problem is that the change broke YouTube on mobile, as it uses
"contain: layout" and positioned elements under it, which are now
positioned regarding to a different element (the one with "contain:
layout").
As we're about to do the branch for M68, the patch was reverted but we
need to decide the plan about what to do for M69.

This part of the spec is needed in order to be able to implement the
optimizations defined by css-contain, which states the following about
layout containment:
"This ensures that the containing element is totally opaque
for layout purposes; nothing outside can affect its internal layout,
and vice versa."

The text related to absolutely and fixed positioned descendants in
layout containment comes from the following discussion on the CSS WG:
https://github.com/w3c/csswg-drafts/issues/404
There you can find a clear example for this issue.

If the spec part is not under discussion, then some sites (like YouTube)
would need to be modified.
Some of the possible changes to be done would be:
* For the case of absolutely positioned elements, it'd be a matter of
adding "position: relative" to the "contain: layout" elements and
updating the offsets in the descendants. That would make things work
before and after the patch.
* For fixed positioned elements, you'd need to apply a transform to
those elements apart from updating the offsets too, as "position:
relative" won't be enough.
* Of course another option for both cases is to simply avoid "contain:
layout" completely on those elements.

So the question now is what to do next?
1) Reland the patch at the beginning of M69 cycle and ping site owners
to get things fixed on their end?
2) Add a use counter to collect data about how many cases are affected
by this (maybe land the use counter in M68 too).
If this is small go to 1). But if it's too big contact site owners to
fix things and try to get it down enough to go to 1).
3) Any other idea?

I don't really know what should be the next steps, so feedback is really
appreciated.

Thanks,
Rego

[1] https://drafts.csswg.org/css-contain/#containment-layout

[Philip Jägenstedt]

Use counters sounds like a good next step to me. But as long as YouTube and perhaps some other big sites depend on this, the use counter won't be of much use. You could perhaps use UKM as well to find more sites that would be affected.

Is https://developer.mozilla.org/en-US/docs/Web/CSS/contain accurate in that no other engine supports the contain property yet?

--
You received this message because you are subscribed to the Google Groups "blink-dev" group.
To view this discussion on the web visit https://groups.google.com/a/chromium.org/d/msgid/blink-dev/30a66c36-0e6a-2197-a7c3-9a96305e81dd%40igalia.com.

[Emil A Eklund]

Have we reached out to YouTube to see if they'd be willing to change
their use of contains? If not I can get the process started.

[Chris Harrelson]

+1 to reaching out to YouTube.

This bug is not good. CSS containment is an important part of the rendering performance strategy. Let's get a use counter in for M68 at the very least.

Also, the issue id is 843900 I believe.

Thanks for finding and pushing on this bug,

Chris

On Mon, May 21, 2018 at 9:01 AM Emil A Eklund <e...@chromium.org> wrote:

Have we reached out to YouTube to see if they'd be willing to change
their use of contains? If not I can get the process started.

--
You received this message because you are subscribed to the Google Groups "rendering-core-dev" group.
To unsubscribe from this group and stop receiving emails from it, send an email to rendering-core-...@chromium.org.
To post to this group, send email to rendering...@chromium.org.
To view this discussion on the web visit https://groups.google.com/a/chromium.org/d/msgid/rendering-core-dev/CADu_oUDB6hMivHO2%2BZT3N6Tq1Z7%3DKjnB%3DnAPuCqBiq3K15N0CQ%40mail.gmail.com.

[Manuel Rego Casasnovas]

On 21/05/18 13:28, Manuel Rego Casasnovas wrote:
> Hi,
>
> According to the css-contain spec [1], layout containment establishes a
> containing block for absolute and fixed positioned descendants.
> We have a bug report about that https://crbug.com/85212 that I decided

^ this should be https://crbug.com/785212 sorry.

[Manuel Rego Casasnovas]

On 21/05/18 18:01, Emil A Eklund wrote:
> Have we reached out to YouTube to see if they'd be willing to change
> their use of contains? If not I can get the process started.

No, I haven't contacted YouTube yet. Probably you have better
channels/contacts to do it, so please go ahead and notify them about
this issue.

Thanks,
Rego

[Manuel Rego Casasnovas]

On 21/05/18 18:16, Chris Harrelson wrote:
> +1 to reaching out to YouTube.
>
> This bug is not good. CSS containment is an important part of the
> rendering performance strategy. Let's get a use counter in for M68 at
> the very least.

I'll add the use counter and make sure it goes into M68

> Also, the issue id is 843900

> <https://bugs.chromium.org/p/chromium/issues/detail?id=843900> I believe.

True I make a mistake on the first mail. I was trying to point to
https://bugs.chromium.org/p/chromium/issues/detail?id=785212
which is the original bug I was trying to fix.

The one you point is the YouTube breakage with further information.

Thanks,
Rego

[Emil A Eklund]

I'll get in touch with the youtube team and will update this bug once
I hear back.

[Manuel Rego Casasnovas]

On 21/05/18 14:34, Philip Jägenstedt wrote:
> Use counters sounds like a good next step to me. But as long as YouTube
> and perhaps some other big sites depend on this, the use counter won't
> be of much use. You could perhaps use UKM as well to find more sites
> that would be affected.

Yes you're right that with YouTube around the usage is going to be
really high.

Sorry but I don't know about UKM, could you point me to some documentation?

> Is https://developer.mozilla.org/en-US/docs/Web/CSS/contain accurate in
> that no other engine supports the contain property yet?

AFAIK that's true.

* Chromium shipped "contain" support long time ago:

* Firefox has "contain: paint" implemented behind a flag (not enabled by
default):
https://bugzilla.mozilla.org/show_bug.cgi?id=1150081

* WebKit doesn't have support yet:
https://bugs.webkit.org/show_bug.cgi?id=172026

* I believe Edge doesn't have support either:

https://wpdev.uservoice.com/forums/257854-microsoft-edge-developer/suggestions/13329330-implement-css-containment

Bye,
Rego

[Rick Byers]

Thanks for engaging with YouTube Emil!

Note that our compat principle here states that we won't block otherwise valuable breaking changes on any single site (especially when that site is a Google property).  I assume we'll get traction getting YouTube updated to remove their dependency on this bug.  But if we don't, and we can get data that suggests it's really ONLY YouTube impacted, then we should be prepared to ship the fix anyway (just like the border-image spec compliance issue that broke mobile GMail a couple years back).

Regarding UKM, that's our internal name for the Chrome User Experience report data.  UKM-based UseCounters are unfortunately an analysis tool available only to Googlers at the moment.  

Rick

Rick

--
You received this message because you are subscribed to the Google Groups "blink-dev" group.

To view this discussion on the web visit https://groups.google.com/a/chromium.org/d/msgid/blink-dev/45b409e6-fe35-28ad-3f42-e3c6c0525381%40igalia.com.

[Rick Byers]

Note that the simplest way to answer the question "what major sites might break due to this change" is to land a UseCounter, then, once it has reached stable, query the HTTP Archive for it.  That has quite a bit of latency though.   You could land the UseCounter and add it to the list of UKM features then get a Googler to look at the UKM data from dev/beta channel or something...

[Manuel Rego Casasnovas]

Thanks for the info Rick, it sounds really useful.

We don't know if more sites are broken, we just got 2 bug reports and
both were the same issue from YouTube.

The use counter has just landed:
https://chromium-review.googlesource.com/c/chromium/src/+/1067917

I guess the next step should be to add it to the list of UKM features.

Then I hope some googler (probably eae as he's the one that knows better
css-contain) can check the data once it's ready.

Cheers,
Rego

On 22/05/18 23:51, Rick Byers wrote:
> Note that the simplest way to answer the question "what major sites
> might break due to this change" is to land a UseCounter, then, once it
> has reached stable, query the HTTP Archive

> <https://docs.google.com/document/d/1cpjWFoXBiuFYI4zb9I7wHs7uYZ0ntbOgLwH-mgqXdEM/edit#heading=h.1m1gg72jnnrt>

> for it.  That has quite a bit of latency though.   You could land the
> UseCounter and add it to the list of UKM features

> <https://cs.chromium.org/chromium/src/chrome/browser/page_load_metrics/observers/use_counter/ukm_features.cc?q=ukm_features&sq=package:chromium&dr=C&l=5>

> then get a Googler to look at the UKM data from dev/beta channel or
> something...
>
> On Tue, May 22, 2018 at 5:48 PM Rick Byers <rby...@chromium.org
> <mailto:rby...@chromium.org>> wrote:
>
> Thanks for engaging with YouTube Emil!
>
> Note that our compat principle here

> <https://docs.google.com/document/d/1RC-pBBvsazYfCNNUSkPqAVpSpNJ96U8trhNkfV0v9fk/edit#heading=h.4k9u8ddizqrq>

> states that we won't block otherwise valuable breaking changes on
> any single site (especially when that site is a Google property).  I
> assume we'll get traction getting YouTube updated to remove their
> dependency on this bug.  But if we don't, and we can get data that
> suggests it's really ONLY YouTube impacted, then we should be
> prepared to ship the fix anyway (just like the border-image spec
> compliance issue

> <https://groups.google.com/a/chromium.org/forum/#!msg/blink-dev/J7rvFkcn8TU/OtIcXTDDAQAJ> that

> broke mobile GMail a couple years back).
>
> Regarding UKM, that's our internal name for the Chrome User
> Experience report

> <https://developers.google.com/web/tools/chrome-user-experience-report/>

> data.  UKM-based UseCounters are unfortunately an analysis tool

> <https://sites.google.com/a/chromium.org/dev/blink/platform-predictability/compat-tools>

[Chris Harrelson]

On Tue, May 22, 2018 at 3:02 PM Manuel Rego Casasnovas <re...@igalia.com> wrote:

Thanks for the info Rick, it sounds really useful.

We don't know if more sites are broken, we just got 2 bug reports and
both were the same issue from YouTube.

The use counter has just landed:
https://chromium-review.googlesource.com/c/chromium/src/+/1067917

I guess the next step should be to add it to the list of UKM features.

Then I hope some googler (probably eae as he's the one that knows better
css-contain) can check the data once it's ready.

I can help you out with this. I think HTTP archive+fixing YouTube should suffice, and we won't need UKM data.

 

To unsubscribe from this group and stop receiving emails from it, send an email to blink-dev+...@chromium.org.
To view this discussion on the web visit https://groups.google.com/a/chromium.org/d/msgid/blink-dev/a685e093-7065-2788-7e34-7d225e5c8946%40igalia.com.

[Stephen Chenney]

Can you do a pixel diff run on Skia Cluster Telemetry? I'm not sure what credentials are needed to use that, but a reviewer should be able to run one for you.

That's wouldn't get every site, but it would get a lot.

Stephen.

To unsubscribe from this group and stop receiving emails from it, send an email to blink-dev+unsubscribe@chromium.org.

To view this discussion on the web visit https://groups.google.com/a/chromium.org/d/msgid/blink-dev/a685e093-7065-2788-7e34-7d225e5c8946%40igalia.com.

--
You received this message because you are subscribed to the Google Groups "rendering-core-dev" group.
To unsubscribe from this group and stop receiving emails from it, send an email to rendering-core-dev+unsub...@chromium.org.
To post to this group, send email to rendering-core-dev@chromium.org.
To view this discussion on the web visit https://groups.google.com/a/chromium.org/d/msgid/rendering-core-dev/CAOMQ%2Bw877Ja2iHAf%2Bu0ydQ0hXTHqP4M7eEME9Bef0RWfPGuE0Q%40mail.gmail.com.

[Stephen Chenney]

I ran cluster telemetry on the patch and nothing of interest turns up. In particular the YouTube mobile issue did not manifest.

It could be they are running older page sets that do not have the contains styling.

Cheers,

Stephen.

On Wed, May 23, 2018 at 6:52 AM, Stephen Chenney <sche...@chromium.org> wrote:

Can you do a pixel diff run on Skia Cluster Telemetry? I'm not sure what credentials are needed to use that, but a reviewer should be able to run one for you.

That's wouldn't get every site, but it would get a lot.

Stephen.

To unsubscribe from this group and stop receiving emails from it, send an email to rendering-core-dev+unsubscribe@chromium.org.
To post to this group, send email to rendering...@chromium.org.

[Manuel Rego Casasnovas]

On 23/05/18 22:06, Stephen Chenney wrote:
> I ran cluster telemetry on the patch and nothing of interest turns up.
> In particular the YouTube mobile issue did not manifest.
>
> It could be they are running older page sets that do not have the
> contains styling.

Thanks for doing this.

The YouTube issue only happens when you're watching a video on mobile
and then you go full-screen. I guess that's explain why it was not hit.

Bye,
Rego

>
> Cheers,
> Stephen.
>
> On Wed, May 23, 2018 at 6:52 AM, Stephen Chenney <sche...@chromium.org
> <mailto:sche...@chromium.org>> wrote:
>
> Can you do a pixel diff run on Skia Cluster Telemetry? I'm not sure
> what credentials are needed to use that, but a reviewer should be
> able to run one for you.
>
> That's wouldn't get every site, but it would get a lot.
>
> Stephen.
>
> On Tue, May 22, 2018 at 6:05 PM, 'Chris Harrelson' via

> rendering-core-dev <rendering...@chromium.org

> > <mailto:rby...@chromium.org <mailto:rby...@chromium.org>>>

> <https://groups.google.com/a/chromium.org/d/msgid/blink-dev/45b409e6-fe35-28ad-3f42-e3c6c0525381%40igalia.com>.

> >
>
> --
> You received this message because you are subscribed to the
> Google Groups "blink-dev" group.
> To unsubscribe from this group and stop receiving emails

> from it, send an email to blink-dev+...@chromium.org
> <mailto:blink-dev%2Bunsu...@chromium.org>.

> To view this discussion on the web visit

> https://groups.google.com/a/chromium.org/d/msgid/blink-dev/a685e093-7065-2788-7e34-7d225e5c8946%40igalia.com
> <https://groups.google.com/a/chromium.org/d/msgid/blink-dev/a685e093-7065-2788-7e34-7d225e5c8946%40igalia.com>.

>
> --
> You received this message because you are subscribed to the
> Google Groups "rendering-core-dev" group.
> To unsubscribe from this group and stop receiving emails from

> it, send an email to rendering-core-...@chromium.org
> <mailto:rendering-core-...@chromium.org>.

> To post to this group, send email to
> rendering...@chromium.org

> <mailto:rendering...@chromium.org>.

> To view this discussion on the web visit

> https://groups.google.com/a/chromium.org/d/msgid/rendering-core-dev/CAOMQ%2Bw877Ja2iHAf%2Bu0ydQ0hXTHqP4M7eEME9Bef0RWfPGuE0Q%40mail.gmail.com
> <https://groups.google.com/a/chromium.org/d/msgid/rendering-core-dev/CAOMQ%2Bw877Ja2iHAf%2Bu0ydQ0hXTHqP4M7eEME9Bef0RWfPGuE0Q%40mail.gmail.com?utm_medium=email&utm_source=footer>.
>
>
>

[Emil A Eklund]

I've got ahold of the engineer in charge of the mobile site, I'll keep this
thread updated.

[Emil A Eklund]

Talked to the youtube team and they'll remove this use of contains layout.
Once that is live we should be able to re-land the change.

[Manuel Rego Casasnovas]

Hi Emil,

On 25/05/18 10:39, Emil A Eklund wrote:
> Talked to the youtube team and they'll remove this use of contains layout.
> Once that is live we should be able to re-land the change.

Nice! Thanks for managing this.

BTW, the use counter is starting to get some data:
https://www.chromestatus.com/metrics/feature/timeline/popularity/2463

Bye,
Rego