Slight bug in the original index.html (repeated ids). Here's an updated repro.

Deleted: index.html 2.5 KB

index.html 2.5 KB View Download

Update: it appears entry.rootBounds has a similar bug. Here's a demo: http://bl.ocks.org/nolanlawson/raw/a4c5d7cd764297c6a2e7a71e1ebc8b89/.

Note in the screenshot that Firefox and Edge report the same height for entry.rootBounds.height as observer.root.getBoundingClientRect().height, but Chrome does not.

Deleted: intersection-observer-rootBounds.png 174 KB

	intersection-observer-rootBounds.png 174 KB View Download

Tested this issue using #59.0.3071.115 on Mac 10.12.5, Win 10 and Linux Ubuntu 14.04 and was able to reproduce the issue.

Observing the same behavior since M51, hence considering this issue as Non-Regression issue. Untriaged the issue so that it get's addressed.

Note:
1. Same behavior is observed in M61 as well
2. Not able to reproduce the issue in M51 and < M51 as above attached html is not showing any data on the page.

Thans!!

I can only reproduce this when the browser window is zoomed.  Does that agree with your observations?

I can reproduce in Windows 10 by setting the system zoom to something other than 100%. (Settings -> Display -> "Change the size of text, apps, and other items".) I can also reproduce by changing the browser's zoom (either zoomed in or zoomed out). You're correct though that I can't reproduce the inaccuracy in the first demo (http://bl.ocks.org/nolanlawson/raw/a44f0022f28b798c439bbfce62e3a917/) when both the browser and the OS are zoomed to 100%.

However, in the second demo (http://bl.ocks.org/nolanlawson/raw/a4c5d7cd764297c6a2e7a71e1ebc8b89/), I can reproduce the fact that entry.rootBounds.height !== observer.root.getBoundingClientRect().height because the former is a rounded integer whereas the latter is a decimal. You can reproduce this with a 100% zoom on both the OS and the browser.

I've also written a third demo (http://bl.ocks.org/nolanlawson/raw/004844253920db80da807af9d23cc2e9/) which can reproduce the fact that entry.boundingClientRect.height !== entry.target.getBoundingClientRect().height because of this rounding issue. Like the second demo, this can be reproduced with both browser and OS zoom set to 100%.

FWIW I can also repro the lack of precision (integer rounding) on Chrome 63.0.3219.0 on Android. This is causing a scrolling perf issue for Mastodon because we have to detect the Chrome bug (https://github.com/tootsuite/mastodon/blob/63b77f23202a6dece419e2eb7180395b2e276b09/app/javascript/mastodon/features/ui/util/get_rect_from_entry.js) and then fall back to getBoundingClientRect which forces layout: https://toot.cafe/@nolan/1700613

The following revision refers to this bug:
  https://chromium.googlesource.com/chromium/src.git/+/f8bf3f03dd8f4b81cb36d21c8af07844de4e9ecb

commit f8bf3f03dd8f4b81cb36d21c8af07844de4e9ecb
Author: Stefan Zager <szager@chromium.org>
Date: Mon Mar 12 19:01:15 2018

[IntersectionObserver] Don't snap bounding rects

These rects should mirror the behavior of getBoundingClientRect,
which doesn't snap.

BUG=758587,737228

Change-Id: If735df6bd24414dfbbd58dce01dc2a90f71df381
Reviewed-on: https://chromium-review.googlesource.com/951640
Reviewed-by: Steve Kobes <skobes@chromium.org>
Commit-Queue: Stefan Zager <szager@chromium.org>
Cr-Commit-Position: refs/heads/master@{#542548}
[modify] https://crrev.com/f8bf3f03dd8f4b81cb36d21c8af07844de4e9ecb/third_party/WebKit/LayoutTests/intersection-observer/client-rect.html
[modify] https://crrev.com/f8bf3f03dd8f4b81cb36d21c8af07844de4e9ecb/third_party/WebKit/Source/core/intersection_observer/IntersectionObservation.cpp
[modify] https://crrev.com/f8bf3f03dd8f4b81cb36d21c8af07844de4e9ecb/third_party/WebKit/Source/core/intersection_observer/IntersectionObserverEntry.cpp
[modify] https://crrev.com/f8bf3f03dd8f4b81cb36d21c8af07844de4e9ecb/third_party/WebKit/Source/core/intersection_observer/IntersectionObserverEntry.h