[Webkit-unassigned] [Bug 198784] rootMargin detection fails when `root` is an element

[bugzilla-daemon at webkit.org]

https://bugs.webkit.org/show_bug.cgi?id=198784

--- Comment #2 from EricD <nospamthankyou at ericdeis.com> ---
Fully reproducible demo here:
https://edeis53.github.io/inviewport/?version=28e1794

-Step#1 - Click on "plain intersection-observer with element" menu link.
-NOTE: This is stripped down reproducable demo that contains the minimal amount of JS to reproduce. The other tests in the demo use a web component that wraps intersectionObserver with additional logic. However, all the examples work and show that rootMargin works when detecting using window, but not when using an element.
-Step#2 - Open the console and observe which element is reporting intersection of the viewport.
-Step#3 - Repeat in iOS Chrome and MacOS Desktop Chrome.

The demo performs the following JS:
    var scrollableContainer = document.querySelector("#scrollableContainer");

    var observer = new IntersectionObserver(
      entries => {
        entries.forEach(entry => {
          if (entry.isIntersecting) {
            entry.target.style.background = "green";
            console.log("is inviewport", this.number);
            this.set("viewportEntered", true);
          } else {
            entry.target.style.background = "red";
            this.set("viewportEntered", false);
            console.log("is outside viewport", this.number);
          }
        });
      },
      {
        root: scrollableContainer,
        threshold: [0, 0.5, 1],
        rootMargin: "500px"
      }
    );

    observer.observe(this.element);

In the demo, you will see elements with their respective index number and viewport status displayed in their html element for reference, as they enter the viewport, they will log their entry/exit. 

For example, in iOS Chrome, you will see element#6 entering the viewport on your screen and at the same time element#6 logs it's intersecting to the console, rootMargin is not working in that instance. However, if you try via Chrome Desktop, when element #6 is entering the viewport on your screen, element #9 or #10 will log to console that it is intersecting because rootMargin detection is working properly and they are the next element that is 500px offscreen and entering.

-- 
You are receiving this mail because:
You are the assignee for the bug.
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.webkit.org/pipermail/webkit-unassigned/attachments/20190612/19517e8d/attachment-0001.html>