Bug 224324

Summary:

IntersectionObserver with root:document does not trigger callback as expected

Product:

WebKit

Reporter:

Johannes Odland <johannes.odland>

Component:

Layout and Rendering

Assignee:

Nobody <webkit-unassigned>

Status:

RESOLVED DUPLICATE

Severity:

Normal

CC:

bfulgham, cathiechen, fred.wang, simon.fraser, zalan

Priority:

Version:

Safari 14

Hardware:

Unspecified

OS:

macOS 11

Attachments:

Description	Flags
Screen shot of failing test	none

Description Johannes Odland 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.

Comment 1 Simon Fraser (smfr) 2021-04-08 09:58:57 PDT

This example works perfectly for me in Safari in Big Sur and in STP 123.

Comment 2 Johannes Odland 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)

Comment 3 Simon Fraser (smfr) 2021-04-08 10:39:44 PDT

Could you try Safari Tech Preview?

Comment 4 Simon Fraser (smfr) 2021-04-08 10:40:07 PDT

(Also I assume you don't have JS disabled)

Comment 5 Johannes Odland 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.

Comment 6 Simon Fraser (smfr) 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 ***

Comment 7 Johannes Odland 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