New issue
Advanced search Search tips

Issue 678335 link

Starred by 4 users

Issue metadata

Status: Assigned
Owner:
Components:
EstimatedDays: ----
NextAction: ----
OS: Windows , All
Pri: 3
Type: Bug



Sign in to add a comment

Intersection observer should always notify if intersectionRatio = 0

Project Member Reported by egarciad@chromium.org, Jan 4 2017

Issue description

Chrome Version: 55.0.2883.95 (64-bit)
OS: OSX 10.11.6

What steps will reproduce the problem?
(1) Using IO, observe an element that is initially offscreen or has style.display = 'none'.

What is the expected result?
IO should notify that the intersectionRatio is 0.

What happens instead?

It doesn't notify the first time. Consider this use case:
1. I would like to use the signal sent by IO as the source of truth for the bounding client rect of an element on a page.
2. An element is initially offscreen. 
3. A user scrolled fast enough that the intersection observer didn't notify when the element was visible.
4. Now the element is offscreen again.
5. There isn't any layout information about that element.

Repro: http://jsbin.com/kiludu/edit?html,console
 
 
io.html
609 bytes View Download
Description: Show this description
Description: Show this description
Description: Show this description
Status: ExternalDependency (was: Untriaged)
This is a known issue.  The current behavior matches the spec, but there is interest in updating the spec'ed behavior:

https://github.com/WICG/IntersectionObserver/issues/165

One possible workaround:

requestAnimationFrame(function() {
  observer.observe(target);
  setTimeout(function() {
    let records = observer.takeRecords();
    if (!records.any(function(r) { return r.target === target })) {
      // target does not intersect
    }
  });
});


I know it's pretty horrible, but it should work.  If the spec change is approved, then it should be a simple fix to add it to chromium's implementation.

Thanks for quick reply and the workaround szager. The only problem with the workaround is that I'd still need to call `getBoundingClientRect()` on the target which might still cause a style recalc.

Comment 6 by ojan@chromium.org, Mar 8 2017

Cc: -szager@chromium.org ojan@chromium.org
Owner: szager@chromium.org
Status: Assigned (was: ExternalDependency)
I think we fixed this now?
Components: Blink>Layout

Comment 8 by ojan@chromium.org, May 8 2018

Cc: -ojan@chromium.org

Sign in to add a comment