Bug 308027 – Dynamic slot insertion resets scroll

• Status: NEW
• Component: Layout and Rendering

[Jacob Thornton]

Created attachment 478382 [details]
Simple reproduction test case

In WebKit, inserting a <slot> dynamically inside a shadow DOM component that's also using position sticky can reset the main page scroll position when the component uses container-type: inline-size.

This is reproducible in MiniBrowser (Release) and Safari/WebKit, and does not reproduce in Chromium/Firefox.

Steps to Reproduce
  1. Open the attached repro.
  2. Scroll the page down (for example, ~900px) to the example shadow dom container.
  3. Hover the target element in the shadow root.
  4. On hover, JS appends a new <slot> into a shadow subtree.
  5. if you are horizontally scrolled, as you moved your mouse when the slot is inserted, it will jump the scroll position back to the start of the container.
  5. Observe page scroll position.

  Actual Results
  The scroll position is changing when slot is injected.

  Expected Results
  The scroll position should not be affected by slot injection.

  Build / Hardware
  - WebKit local build (Release), reproduced on macOS (Apple Silicon).
  - Reproduced in MiniBrowser built from current branch.

[Radar WebKit Bug Importer]

<rdar://problem/170525902>

[Simon Fraser (smfr)]

I see the scroll reset on the scroll container, but I don't see the page scrolling.

[Simon Fraser (smfr)]

This happens when we do an interleaved layout, and layout the tree with most of the `EXAMPLE-CONTAINER` content missing; there's no overflow, so we scroll the overflow scroller to 0,0. Overflow is added back when we do the full layout later.

The fix probably involves having interleaved layouts never call `RenderBlock::updateScrollInfoAfterLayout()`.