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.
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).
Created attachment 293262 [details] Work in progress
Created attachment 293271 [details] Step 1: Bindings support
rdar://problem/23651605
Oh it looks like the bots are choking on an unrelated test that's temporarily broken.
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 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
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 on attachment 293271 [details] Step 1: Bindings support Landed in https://trac.webkit.org/r208181.
It looks like all other major browsers already shipped support for this API, already. Simon, can you give a status update on this, please? Sebastian
Is there any estimation for what version will this support be added in WebKit? All other browsers already support it...
Created attachment 333008 [details] Work in progress patch
dvertisements 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. https://spinbikes218477221.wordpress.com/
At the risk of bugging Simon, any thoughts on getting the WIP to a final patch? Would beer help? :-).
(In reply to William J. Edney from comment #15) > At the risk of bugging Simon, any thoughts on getting the WIP to a final > patch? Would beer help? :-). I would also buy Simon a big old burger if we could get this in Safari
Is there any idea of when this is likely to land in Safari? It's such a great API.
Thanks for starting to work on this, Simon! I ran your patch through the Intersection Observer WPT and a few demo sites. These seem to be the outstanding issues: 1. Notifications don't seem to be firing, either when scrolling or when new element is added to the DOM (see assert_equals failures on entries.length) 2. Should be able to observe target in a same-origin iframe, but throws WrongDocumentException instead 3. rootMargin parsing is not up-to-spec. Specifically, step 5 doesn't seem to be implemented. 4. Doesn't throw expected exceptions on invalid constructor arguments 5. (seen in demo) IntersectionObserverEntry.isIntersecting attribute is not implemented (from https://hacks.mozilla.org/2017/08/intersection-observer-comes-to-firefox/) 6. (seen in demo) When user scrolls using the trackpad or by holding and dragging the scrollbar, intersection events are not fired as frequently when threshold is fine grained. This is clear for the top-most box in the MDN demo: Safari video vs. Chrome video. Here's the WPT result summary: https://danyao.github.io/intersection-observer/report/all.html#test-file-20 Is there anything I can help to land all or parts of this patch?
I don’t think Simon is going to be picking this up any time soon, so it would be great if someone else did. A good start would be to add tests to the patch to cover the issues mentioned above, then rebase the patch, and refine until all the tests pass. If you do work on it, please communicate with others here about the fact that you are doing so, and attach work in progress patches from time to time so someone else can pick up where you left off if you drop it.
(In reply to Darin Adler from comment #19) > I don’t think Simon is going to be picking this up any time soon, so it > would be great if someone else did. > > A good start would be to add tests to the patch to cover the issues > mentioned above, then rebase the patch, and refine until all the tests pass. > If you do work on it, please communicate with others here about the fact > that you are doing so, and attach work in progress patches from time to time > so someone else can pick up where you left off if you drop it. Sounds good, I'll upload WIP patches as I go along.
Created attachment 344885 [details] WIP
(In reply to Ali Juma from comment #21) > Created attachment 344885 [details] > WIP This passes 16/24 web platform tests (the web platform tests cover all the issues mentioned in Comment 18). The main work still to be done includes: 1) Dealing with zero-area intersections 2) Cross-document observation 3) Checking if behavior with pinch zoom and page zoom is reasonable 4) Correctly handling lifetime of IntersectionObservers and their associated roots and targets (so they're not destroyed too early, but also don't leak) (1) and (2) are covered by the 8 remaining web platform test failures.
Comment on attachment 344885 [details] WIP Attachment 344885 [details] did not pass mac-ews (mac): Output: https://webkit-queues.webkit.org/results/8520343 New failing tests: imported/w3c/web-platform-tests/intersection-observer/zero-area-element-hidden.html imported/w3c/web-platform-tests/intersection-observer/observer-attributes.html imported/w3c/web-platform-tests/intersection-observer/bounding-box.html intersection-observer/intersection-observer-interface.html imported/w3c/web-platform-tests/intersection-observer/same-document-root.html imported/w3c/web-platform-tests/intersection-observer/same-document-no-root.html imported/w3c/web-platform-tests/intersection-observer/observer-without-js-reference.html imported/w3c/web-platform-tests/intersection-observer/remove-element.html imported/w3c/web-platform-tests/intersection-observer/shadow-content.html imported/w3c/web-platform-tests/intersection-observer/observer-exceptions.html imported/w3c/web-platform-tests/intersection-observer/display-none.html intersection-observer/intersection-observer-entry-interface.html imported/w3c/web-platform-tests/intersection-observer/disconnect.html imported/w3c/web-platform-tests/intersection-observer/multiple-targets.html imported/w3c/web-platform-tests/intersection-observer/root-margin.html imported/w3c/web-platform-tests/intersection-observer/multiple-thresholds.html imported/w3c/web-platform-tests/intersection-observer/unclipped-root.html imported/w3c/web-platform-tests/intersection-observer/containing-block.html
Created attachment 344897 [details] Archive of layout-test-results from ews102 for mac-sierra The attached test failures were seen while running run-webkit-tests on the mac-ews. Bot: ews102 Port: mac-sierra Platform: Mac OS X 10.12.6
Comment on attachment 344885 [details] WIP Attachment 344885 [details] did not pass mac-wk2-ews (mac-wk2): Output: https://webkit-queues.webkit.org/results/8520388 New failing tests: imported/w3c/web-platform-tests/intersection-observer/iframe-no-root.html intersection-observer/intersection-observer-interface.html imported/w3c/web-platform-tests/intersection-observer/isIntersecting-change-events.html imported/w3c/web-platform-tests/intersection-observer/cross-origin-iframe.html imported/w3c/web-platform-tests/intersection-observer/timestamp.html imported/w3c/web-platform-tests/intersection-observer/zero-area-element-visible.html imported/w3c/web-platform-tests/intersection-observer/same-document-zero-size-target.html imported/w3c/web-platform-tests/intersection-observer/client-rect.html intersection-observer/intersection-observer-entry-interface.html imported/w3c/web-platform-tests/intersection-observer/edge-inclusive-intersection.html
Created attachment 344900 [details] Archive of layout-test-results from ews104 for mac-sierra-wk2 The attached test failures were seen while running run-webkit-tests on the mac-wk2-ews. Bot: ews104 Port: mac-sierra-wk2 Platform: Mac OS X 10.12.6
Comment on attachment 344885 [details] WIP Attachment 344885 [details] did not pass mac-debug-ews (mac): Output: https://webkit-queues.webkit.org/results/8520387 New failing tests: imported/w3c/web-platform-tests/intersection-observer/zero-area-element-hidden.html imported/w3c/web-platform-tests/intersection-observer/observer-attributes.html imported/w3c/web-platform-tests/intersection-observer/bounding-box.html intersection-observer/intersection-observer-interface.html imported/w3c/web-platform-tests/intersection-observer/same-document-root.html imported/w3c/web-platform-tests/intersection-observer/containing-block.html imported/w3c/web-platform-tests/intersection-observer/same-document-no-root.html imported/w3c/web-platform-tests/intersection-observer/observer-without-js-reference.html imported/w3c/web-platform-tests/intersection-observer/multiple-thresholds.html imported/w3c/web-platform-tests/intersection-observer/remove-element.html imported/w3c/web-platform-tests/intersection-observer/shadow-content.html imported/w3c/web-platform-tests/intersection-observer/display-none.html imported/w3c/web-platform-tests/intersection-observer/disconnect.html intersection-observer/intersection-observer-entry-interface.html imported/w3c/web-platform-tests/intersection-observer/multiple-targets.html imported/w3c/web-platform-tests/intersection-observer/root-margin.html imported/w3c/web-platform-tests/intersection-observer/unclipped-root.html imported/w3c/web-platform-tests/intersection-observer/observer-exceptions.html
Created attachment 344903 [details] Archive of layout-test-results from ews112 for mac-sierra The attached test failures were seen while running run-webkit-tests on the mac-debug-ews. Bot: ews112 Port: mac-sierra Platform: Mac OS X 10.12.6
Comment on attachment 344885 [details] WIP Attachment 344885 [details] did not pass ios-sim-ews (ios-simulator-wk2): Output: https://webkit-queues.webkit.org/results/8520424 New failing tests: imported/w3c/web-platform-tests/intersection-observer/iframe-no-root.html intersection-observer/intersection-observer-interface.html imported/w3c/web-platform-tests/intersection-observer/isIntersecting-change-events.html imported/w3c/web-platform-tests/intersection-observer/cross-origin-iframe.html imported/w3c/web-platform-tests/intersection-observer/timestamp.html imported/w3c/web-platform-tests/intersection-observer/zero-area-element-visible.html imported/w3c/web-platform-tests/intersection-observer/same-document-zero-size-target.html imported/w3c/web-platform-tests/intersection-observer/client-rect.html intersection-observer/intersection-observer-entry-interface.html imported/w3c/web-platform-tests/intersection-observer/edge-inclusive-intersection.html
Created attachment 344904 [details] Archive of layout-test-results from ews125 for ios-simulator-wk2 The attached test failures were seen while running run-webkit-tests on the ios-sim-ews. Bot: ews125 Port: ios-simulator-wk2 Platform: Mac OS X 10.13.4
Comment on attachment 344885 [details] WIP Attachment 344885 [details] did not pass ios-sim-ews (ios-simulator-wk2): Output: https://webkit-queues.webkit.org/results/8521768 New failing tests: imported/w3c/web-platform-tests/intersection-observer/timestamp.html intersection-observer/intersection-observer-interface.html imported/w3c/web-platform-tests/intersection-observer/isIntersecting-change-events.html imported/w3c/web-platform-tests/intersection-observer/cross-origin-iframe.html imported/w3c/web-platform-tests/intersection-observer/iframe-no-root.html imported/w3c/web-platform-tests/intersection-observer/zero-area-element-visible.html imported/w3c/web-platform-tests/intersection-observer/edge-inclusive-intersection.html imported/w3c/web-platform-tests/intersection-observer/client-rect.html intersection-observer/intersection-observer-entry-interface.html imported/w3c/web-platform-tests/intersection-observer/same-document-zero-size-target.html
Created attachment 344913 [details] Archive of layout-test-results from ews126 for ios-simulator-wk2 The attached test failures were seen while running run-webkit-tests on the ios-sim-ews. Bot: ews126 Port: ios-simulator-wk2 Platform: Mac OS X 10.13.4
Created attachment 345769 [details] WIP This now passes all 25 intersection-observer WPTs. There are still issues tofix with pinch zoom (and possibly page zoom), as well as with object lifetimes.
Comment on attachment 345769 [details] WIP Attachment 345769 [details] did not pass mac-ews (mac): Output: https://webkit-queues.webkit.org/results/8652627 New failing tests: imported/w3c/web-platform-tests/intersection-observer/zero-area-element-hidden.html imported/w3c/web-platform-tests/intersection-observer/observer-attributes.html imported/w3c/web-platform-tests/intersection-observer/display-none.html imported/w3c/web-platform-tests/intersection-observer/isIntersecting-change-events.html imported/w3c/web-platform-tests/intersection-observer/timestamp.html imported/w3c/web-platform-tests/intersection-observer/remove-element.html imported/w3c/web-platform-tests/intersection-observer/observer-exceptions.html imported/w3c/web-platform-tests/intersection-observer/multiple-targets.html imported/w3c/web-platform-tests/intersection-observer/same-document-root.html imported/w3c/web-platform-tests/intersection-observer/iframe-no-root.html imported/w3c/web-platform-tests/intersection-observer/unclipped-root.html imported/w3c/web-platform-tests/intersection-observer/root-margin.html imported/w3c/web-platform-tests/intersection-observer/containing-block.html imported/w3c/web-platform-tests/intersection-observer/zero-area-element-visible.html imported/w3c/web-platform-tests/intersection-observer/disconnect.html imported/w3c/web-platform-tests/intersection-observer/same-document-zero-size-target.html imported/w3c/web-platform-tests/intersection-observer/bounding-box.html imported/w3c/web-platform-tests/intersection-observer/same-document-no-root.html imported/w3c/web-platform-tests/intersection-observer/observer-without-js-reference.html imported/w3c/web-platform-tests/intersection-observer/cross-origin-iframe.html imported/w3c/web-platform-tests/intersection-observer/text-target.html imported/w3c/web-platform-tests/intersection-observer/shadow-content.html imported/w3c/web-platform-tests/intersection-observer/edge-inclusive-intersection.html imported/w3c/web-platform-tests/intersection-observer/client-rect.html imported/w3c/web-platform-tests/intersection-observer/multiple-thresholds.html
Created attachment 345776 [details] Archive of layout-test-results from ews100 for mac-sierra The attached test failures were seen while running run-webkit-tests on the mac-ews. Bot: ews100 Port: mac-sierra Platform: Mac OS X 10.12.6
Comment on attachment 345769 [details] WIP Attachment 345769 [details] did not pass mac-debug-ews (mac): Output: https://webkit-queues.webkit.org/results/8652664 New failing tests: imported/w3c/web-platform-tests/intersection-observer/zero-area-element-hidden.html imported/w3c/web-platform-tests/intersection-observer/observer-attributes.html imported/w3c/web-platform-tests/intersection-observer/display-none.html imported/w3c/web-platform-tests/intersection-observer/isIntersecting-change-events.html imported/w3c/web-platform-tests/intersection-observer/timestamp.html imported/w3c/web-platform-tests/intersection-observer/remove-element.html imported/w3c/web-platform-tests/intersection-observer/observer-exceptions.html imported/w3c/web-platform-tests/intersection-observer/multiple-targets.html imported/w3c/web-platform-tests/intersection-observer/same-document-root.html imported/w3c/web-platform-tests/intersection-observer/iframe-no-root.html imported/w3c/web-platform-tests/intersection-observer/unclipped-root.html imported/w3c/web-platform-tests/intersection-observer/root-margin.html imported/w3c/web-platform-tests/intersection-observer/containing-block.html imported/w3c/web-platform-tests/intersection-observer/zero-area-element-visible.html imported/w3c/web-platform-tests/intersection-observer/disconnect.html imported/w3c/web-platform-tests/intersection-observer/same-document-zero-size-target.html imported/w3c/web-platform-tests/intersection-observer/bounding-box.html imported/w3c/web-platform-tests/intersection-observer/same-document-no-root.html imported/w3c/web-platform-tests/intersection-observer/observer-without-js-reference.html imported/w3c/web-platform-tests/intersection-observer/cross-origin-iframe.html imported/w3c/web-platform-tests/intersection-observer/text-target.html imported/w3c/web-platform-tests/intersection-observer/shadow-content.html imported/w3c/web-platform-tests/intersection-observer/edge-inclusive-intersection.html imported/w3c/web-platform-tests/intersection-observer/client-rect.html imported/w3c/web-platform-tests/intersection-observer/multiple-thresholds.html
Created attachment 345779 [details] Archive of layout-test-results from ews112 for mac-sierra The attached test failures were seen while running run-webkit-tests on the mac-debug-ews. Bot: ews112 Port: mac-sierra Platform: Mac OS X 10.12.6
Comment on attachment 345769 [details] WIP Attachment 345769 [details] did not pass ios-sim-ews (ios-simulator-wk2): Output: https://webkit-queues.webkit.org/results/8652675 New failing tests: imported/w3c/web-platform-tests/intersection-observer/iframe-no-root.html imported/w3c/web-platform-tests/intersection-observer/cross-origin-iframe.html
Created attachment 345780 [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.13.4
Created attachment 346780 [details] WIP
Comment on attachment 346780 [details] WIP Attachment 346780 [details] did not pass ios-sim-ews (ios-simulator-wk2): Output: https://webkit-queues.webkit.org/results/8801096 New failing tests: imported/w3c/web-platform-tests/intersection-observer/iframe-no-root.html intersection-observer/root-element-deleted.html imported/w3c/web-platform-tests/intersection-observer/cross-origin-iframe.html
Created attachment 346789 [details] Archive of layout-test-results from ews123 for ios-simulator-wk2 The attached test failures were seen while running run-webkit-tests on the ios-sim-ews. Bot: ews123 Port: ios-simulator-wk2 Platform: Mac OS X 10.13.4
Created attachment 351917 [details] WIP Includes patches from bug 189624, bug 189833, bug 189091, and WIP for cross-document observation
Comment on attachment 351917 [details] WIP Attachment 351917 [details] did not pass ios-sim-ews (ios-simulator-wk2): Output: https://webkit-queues.webkit.org/results/9509339 New failing tests: imported/w3c/web-platform-tests/intersection-observer/iframe-no-root.html imported/w3c/web-platform-tests/intersection-observer/cross-origin-iframe.html
Created attachment 351931 [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.13.6
We're now down to a single web platform test failure on trunk (target-in-different-window.html, which covers the case of a single observer with targets in two different browser windows).
Can this be closed now?