New issue
Advanced search Search tips

Issue 626254 link

Starred by 1 user
Status: WontFix
Owner: ----
Closed: Jul 2016
Cc:
szager@chromium.org
Components:
EstimatedDays: ----
NextAction: ----
OS: Mac
Pri: 2
Type: Bug



Sign in to add a comment

IntersectionObserverEntry#intersectionRatio equals 0 when HTMLElement enters viewport

Reported by kova...@soundcloud.com, Jul 7 2016 
UserAgent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_10_5) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/51.0.2704.106 Safari/537.36

Steps to reproduce the problem:
1. Open a test page http://output.jsbin.com/kakejumehu 
2. Some of the list items when the page is being slowly scrolled down are not changing its color from black to red

What is the expected behavior?
Each list item should  change its color from black to red when it becomes visible

What went wrong?
According to the spec, IntersectionObserver callback should be called when the element comes partially into viewport. It seems to be correctly implemented, but for some reason IntersectionObserverEntry#intersectionRatio property equals 0, even when the element is partially visible.

The current workaround I came up with is to change of the default value of `threshold` option passed to IntersectionObserver constructor. When it's set to, say,  [0, 0.25, 0.5, 0.75, 1] instead of default [0] value, the observer callback is called several times so that it's possible to correctly detect the visiblity of target element.

Did this work before? N/A 

Chrome version: 51.0.2704.106  Channel: stable
OS Version: OS X 10.10.5
Flash Version: Shockwave Flash 22.0 r0

Comment 1 by l446240525@gmail.com, Jul 7 2016 

See https://github.com/WICG/IntersectionObserver/issues/134

My solution: {threshold: [0.0001]}

Szager's solution: 

if (change.target.isIntersecting) {
    change.target.isIntersecting = false;
    handleNotIntersecting();
} else {
    change.target.isIntersecting = true;
    handleIntersecting();
}

In your case, there is no need to call isVisible(entry):

function observerCallback(ioEntries) {
    ioEntries.forEach((entry) => {
      entry.target.style.background = '#FF0000';
      observer.unobserve(entry.target);
    });
}

So this is not a bug, Cc Szager@chromium.org

Comment 2 by rsesek@chromium.org, Jul 7 2016

Cc: szager@chromium.org
Components: -UI Blink

Comment 3 by dtapu...@chromium.org, Jul 7 2016

Components: -Blink Blink>Layout

Comment 4 by szager@chromium.org, Jul 7 2016

Status: WontFix (was: Unconfirmed)
FYI, this is being discussed on the issue tracker on the IntersectionObserver spec repo:

https://github.com/WICG/IntersectionObserver/issues/69#issuecomment-230936773

It's a known wart on the API, and we'd like to fix it; please chime in there if you have an opinion.

Closing this issue; this more appropriately handled as a spec issue.

Comment 5 by kova...@soundcloud.com, Jul 8 2016 

Thanks for a quick response.
To be honest, I don't have a strong opinion on this as I haven't tried IntersectionObserver API in various scenarios, but adjusting the value of `threshold` parameter seems to be an acceptable solution for now.
►

Sign in to add a comment