Bug 159475 - Implement IntersectionObserver
: Implement IntersectionObserver
Status: ASSIGNED
Product: WebKit
Classification: Unclassified
Component: WebKit Misc.
: Safari Technology Preview
: All All
: P2 Enhancement
Assigned To: Simon Fraser (smfr)
https://wicg.github.io/IntersectionOb...
: InRadar, Performance, WebExposed
Depends on: 165746
Blocks:
  Show dependency treegraph
 
Reported: 2016-07-06 10:24 PDT by Jeffrey Gilbert
Modified: 2016-12-11 20:36 PST (History)
8 users (show)

See Also:


Attachments
Work in progress (118.52 KB, patch)
2016-10-28 17:54 PDT, Simon Fraser (smfr)
no flags Details | Formatted Diff | Diff
Step 1: Bindings support (125.24 KB, patch)
2016-10-28 20:58 PDT, Simon Fraser (smfr)
rniwa: review+
buildbot: commit‑queue-
Details | Formatted Diff | Diff
Archive of layout-test-results from ews121 for ios-simulator-wk2 (47.52 MB, application/zip)
2016-10-28 22:37 PDT, Build Bot
no flags Details

Note You need to log in before you can comment on or make changes to this bug.
Description Jeffrey Gilbert 2016-07-06 10:24:10 PDT
Working draft for implementation:
https://wicg.github.io/IntersectionObserver/

Intent to implement in Firefox by version 50
https://bugzilla.mozilla.org/show_bug.cgi?id=1243846
https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API

Chrome adopted IntersectionObserver support in version 51
https://www.chromestatus.com/feature/5695342691483648 
https://chromium.googlesource.com/chromium/src/third_party/+/master/WebKit/Source/core/dom/IntersectionObserver.cpp

MS Edge has committed to adopting support, but have not implemented yet
https://developer.microsoft.com/en-us/microsoft-edge/platform/status/intersectionobserver
https://wpdev.uservoice.com/forums/257854-microsoft-edge-developer/suggestions/13407852-intersectionobserver

Rationale:
Advertisements typically use Flash, frame per second counters, or costly geometry calculations within loops to determine if an ad is in view or not. The mechanisms are difficult to implement, non-standardized, and costly to web performance. The IAB, MRC, browser vendors, and web standards bodies have attempted to solve for this by introducing first the PageVisibility 2 API draft, and now splintered off from that, the IntersectionObserver API. This pattern allows for efficient event driven code to take advantage of indicators sent directly from the browser of the area of a page or more importantly sandboxed iframe which are viewable without requiring access to the parent documents information or leaking important security details.

Chrome has introduced this early as a way of hastening the elimination of the Flash browser plugin as a necessary evil, which they plan to throttle by default at the end of the year. Firefox's intention is to introduce this functionality as part of version 50, currently in nightlies. Microsoft has commented to the IAB that they intend to introduce the functionality, but have not committed to a build version or date for releasing it. That leaves only Safari/Webkit based browsers left. This solves an obvious problem for advertisers and consumers/end users who want transparency and performance, respectively.
Comment 1 Jeffrey Gilbert 2016-08-04 10:15:31 PDT
Update: Chrome has a working implementation out now as of Chrome 51. The next Chrome release will also introduce a throttling mechanism on Flash which will greatly impact Flash functionality across site publishers. Linked in the comments are some of the implementation details for the Chrome feature.

Safari currently has no ability to report behavior using Flash as it has already been throttled and when it's used, it's inaccurate upon initial page load until the Flash player has been scrolled in and out of view so it's forced to change state. Geometric polling does work, but it's an expensive operation to call from javascript resulting in reduced battery life from higher cpu usage. 

Billing standards for advertisements are rapidly moving toward viewability based guarantees, so this mechanism for measurement and the impact of these calls will not be reduced until the implementation of this spec goes out in major webkit browsers(specifically Safari, mobile Safari, and embedded webviews).
Comment 2 Simon Fraser (smfr) 2016-10-28 17:54:37 PDT
Created attachment 293262 [details]
Work in progress
Comment 3 Simon Fraser (smfr) 2016-10-28 20:58:13 PDT
Created attachment 293271 [details]
Step 1: Bindings support
Comment 4 Simon Fraser (smfr) 2016-10-28 21:06:05 PDT
rdar://problem/23651605
Comment 5 Ryosuke Niwa 2016-10-28 22:16:46 PDT
Oh it looks like the bots are choking on an unrelated test that's temporarily broken.
Comment 6 Ryosuke Niwa 2016-10-28 22:21:07 PDT
Comment on attachment 293271 [details]
Step 1: Bindings support

View in context: https://bugs.webkit.org/attachment.cgi?id=293271&action=review

> LayoutTests/intersection-observer/intersection-observer-entry-interface.html:4
> +<head>
> +<script src="../resources/js-test-pre.js"></script>
> +</head>

Can we use testharness.js instead?  Ideally, we'd upstream these tests to web-platform-tests.

> LayoutTests/intersection-observer/intersection-observer-entry-interface.html:10
> +    if (window.internals)
> +        internals.settings.setIntersectionObserverEnabled(true);

For custom elements & shadow DOM, I unconditionally enabled them all in DRT & WTR.
Comment 7 Build Bot 2016-10-28 22:37:19 PDT
Comment on attachment 293271 [details]
Step 1: Bindings support

Attachment 293271 [details] did not pass ios-sim-ews (ios-simulator-wk2):
Output: http://webkit-queues.webkit.org/results/2397342

New failing tests:
compositing/absolute-inside-out-of-view-fixed.html
Comment 8 Build Bot 2016-10-28 22:37:25 PDT
Created attachment 293278 [details]
Archive of layout-test-results from ews121 for ios-simulator-wk2

The attached test failures were seen while running run-webkit-tests on the ios-sim-ews.
Bot: ews121  Port: ios-simulator-wk2  Platform: Mac OS X 10.11.6
Comment 9 Simon Fraser (smfr) 2016-10-31 15:16:53 PDT
Comment on attachment 293271 [details]
Step 1: Bindings support

Landed in https://trac.webkit.org/r208181.