Bug 224324

Summary: IntersectionObserver with root:document does not trigger callback as expected
Product: WebKit Reporter: Johannes Odland <johannes.odland>
Component: Layout and RenderingAssignee: Nobody <webkit-unassigned>
Status: RESOLVED DUPLICATE    
Severity: Normal CC: bfulgham, cathiechen, fred.wang, simon.fraser, zalan
Priority: P2    
Version: Safari 14   
Hardware: Unspecified   
OS: macOS 11   
Attachments:
Description Flags
Screen shot of failing test none

Johannes Odland
Reported 2021-04-08 05:10:55 PDT
IntersectionObserver with root:document does not invoke the callback when the target intersects with the root intersection rectangle. When the intersection root is a document, the root intersection rectangle is the document's viewport. When a target intersects with the viewport the observer's callback should be invoked, but it is not. Steps to reproduce: 1: open the following codepen: https://codepen.io/johannesodland/pen/mdRqdxE 2: scroll to the bottom. Expected result: Callback is invoked and background-color of footer/target should be green. What went wrong? Callback is not invoked and background-color of footer/target is red. Both Firefox and Chrome invokes the callback. Safari now passes the suggested feature-detection for document as intersection root (https://github.com/w3c/IntersectionObserver/issues/372), but fails to invoke callbacks when target is intersecting.
Attachments
Screen shot of failing test (264.18 KB, image/png)
2021-04-08 10:18 PDT, Johannes Odland 		no flags
Details
View All Add attachment proposed patch, testcase, etc.
Simon Fraser (smfr)
Comment 1 2021-04-08 09:58:57 PDT
This example works perfectly for me in Safari in Big Sur and in STP 123.
Johannes Odland
Comment 2 2021-04-08 10:18:28 PDT
Created attachment 425514 [details] Screen shot of failing test It fails in Versjon 14.0.3 (16610.4.3.1.7) on Big Sur 11.2.3 (20D91)
Simon Fraser (smfr)
Comment 3 2021-04-08 10:39:44 PDT
Could you try Safari Tech Preview?
Simon Fraser (smfr)
Comment 4 2021-04-08 10:40:07 PDT
(Also I assume you don't have JS disabled)
Johannes Odland
Comment 5 2021-04-08 10:53:40 PDT
It seems to be working fine in STP :) I have JS enabled in Safari. The callback triggers if target is in the viewport when IntObs is instantiated. (Set target height to less than 100vh in the example) The bug got reported on one of our components and I was able to reproduce it. I then recreated it in the example I provided.
Simon Fraser (smfr)
Comment 6 2021-04-08 10:55:51 PDT
I think http://trac.webkit.org/changeset/257976/webkit fixed this *** This bug has been marked as a duplicate of bug 208047 ***
Johannes Odland
Comment 7 2021-04-08 11:13:48 PDT
Any suggestions on how to improve the feature-detection? This version of Safari passes the suggested feature-detection, but the implementation is broken. https://github.com/w3c/IntersectionObserver/issues/372#issuecomment-577855647
Note You need to log in before you can comment on or make changes to this bug.