UserAgent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/58.0.3029.110 Safari/537.36 Edge/16.16299

Steps to reproduce the problem:
1. Open http://bl.ocks.org/nolanlawson/raw/91515336dcf019e455f5b12dbcc8acc8/
2. Notice that the observer event only fires once, whereas in Firefox 56 and Edge 16 it fires three times

What is the expected behavior?
In the IntersectionObserver spec (https://w3c.github.io/IntersectionObserver/#intersectionobserver-intersection-root) it says :

"The root intersection rectangle [ when non-implicit and without overflow clip is ] the result of running the getBoundingClientRect() algorithm on the intersection root."

In the attached example, the container has a height of 600px and a padding of 50px, thus the getBoundingClientRect() returns a height of 700 in all browsers, which is what is supposed to be used as the root rectangle. Thus the intersection event should fire when the border box is crossed (not the padding box).

What went wrong?
Chrome, however, appears to be using the 600px padding box rather than the 700px border box, so the event doesn't fire at the same point as Firefox/Edge.

Did this work before? N/A 

Does this work in other browsers? Yes

Chrome version: 62.0.3202.89  Channel: stable
OS Version: 10.0
Flash Version: 

There's some discussion of this issue in http://www.quirksmode.org/blog/archives/2017/10/intersection_ob.html
 

Deleted: index.html 2.3 KB

index.html 2.3 KB View Download