[csswg-drafts] [css-contain] Behavior of slightly offscreen content having`content-visibility:auto` when UA margin around the viewport is 0 (#8407)

jihyerish has just created a new issue for https://github.com/w3c/csswg-drafts:

== [css-contain] Behavior of slightly offscreen content having`content-visibility:auto` when UA margin around the viewport is 0 ==
In the description about the [element being relevant](https://w3c.github.io/csswg-drafts/css-contain-2/#relevant-to-the-user),
there is the recommended UA margin around the viewport to use for deciding whether the element is on-screen or not.

> NOTE: This margin is meant to allow the user agent to begin preparing for an element to be in the viewport soon. A margin of 50% is suggested as a reasonable default.

But if the **margin is set to 0%** and the content having `content-visibility:auto` is slightly offscreen,
then the content looks flashing.

Here is the test code shows the behavior above:
* Sample code [(Live demo)](https://jihyerish.github.io/demos/content-visibility/content-visibility-auto-relevant-content-margin.html)
```html
...
<style>
.outer {
    position: absolute;
    left: -1px;
    background: black;
    padding-right: 10px;
    padding-bottom: 10px;
}

.inner {
    content-visibility: auto;
    contain-intrinsic-size: 50px 50px;
    background: red;
}
</style>

<div class="outer">
  <div class="inner" id="target">  
  </div>
</div>

...
```
This happens because when IntersectionObserver for `content-visibility` triggers, the content isn't considered relevant at first. Then `contain-intrinsic-size` applies to the content and it makes the element relevant to the user.
Thus becoming relevant to user, the content has its size as 0x0 again. 
This causes the content not being considered relevant again and continue the loop, and as a result it looks like the content is flashing.

When I check this case for both chrome and firefox after setting the UA margin as 0,
the results are the same. The content is flashing.

> _NOTE: How to modify UA margin 0_
> * Chromium: 
>   - change `kViewportMarginPercentage` value as 0 in "third_party/blink/renderer/core/display_lock/display_lock_document_state.h"
> * Gecko:
>   - go to "about:config" in firefox
>   - change `layout.css.content-visibility-relevant-content-margin` value as 0

I guess the expected result of this case is that the content shows the stable layout (without flashing).
But maybe what happens now is the reasonable result.
What would be the appropriate behavior of this?

(This is related to gecko bug: https://bugzilla.mozilla.org/show_bug.cgi?id=1804761)

Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/8407 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Tuesday, 7 February 2023 05:13:29 UTC