mirror of
https://github.com/react/react-native.git
synced 2026-09-28 05:13:06 +08:00
Edward Kimmel
5646c31dff
Summary: Hit this using IntersectionObserver on a ScrollView with `rootMargin` to preload content below the fold. `rootBounds` grew by the margin, but `intersectionRatio` stayed 0 for anything past the clip. We're clipping the target to the root's overflow (the ScrollView / `overflow: hidden` box) *before* intersecting with the margin-expanded rect. That's not what the spec does. [Compute the intersection](https://w3c.github.io/IntersectionObserver/#calculate-intersection-rect-algo): walk containing blocks *while container is not root* and clip there, then intersect with the [root intersection rectangle](https://w3c.github.io/IntersectionObserver/#root-intersection-rectangle), which already includes `rootMargin`. The spec also calls out that `rootMargin` only applies to the root — clipping by any other ancestor is unchanged. This stops overflow-clipping the observation root itself. Intermediate clippers stay as they are, so a viewport-rooted observer still can't see past a ScrollView. That's `scrollMargin`, which we don't implement. -- Lots of words to say: This enables rootMargin to correctly extend the viewport of ScrollViews or any other view with overflow clipping when using that view as the root. This also gives users a path around missing scrollMargin. ## Changelog: [GENERAL] [FIXED] - IntersectionObserver rootMargin now affects intersection against a clipping root Pull Request resolved: https://github.com/react/react-native/pull/58177 Test Plan: - existing "clipping root with rootMargin" test: 10px margin on a 100x100 overflow:hidden root should intersect 60px of a child sitting at y=50, not 50px - new ScrollView + `rootMargin: 150px` + `threshold: [0.01]` — target fully below the fold reports intersecting - new viewport-root control — same layout, still not intersecting (intermediate ScrollView still clips) Reviewed By: rubennorte Differential Revision: D117876568 Pulled By: christophpurrer fbshipit-source-id: 381991048593959748c44e76c17a06fd8b5c0fb3