Description
In the description about the element being relevant,
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)
...
<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 the user, the content has its size as 0x0 again.
This causes the content not to be considered relevant again and continues 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
kViewportMarginPercentagevalue 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-marginvalue as 0
I guess the expected result of this case is that the content shows a stable layout (without flashing).
But maybe what happens now is the reasonable result.
What would be the appropriate behavior for this?
CC @vmpstr
(This is related to gecko bug: https://bugzilla.mozilla.org/show_bug.cgi?id=1804761)