Triggers 'inview' event with isInView true when element is not really visible

[givankin]

My case was creating elements in an inactive tab (jquery ui tab, not browser's one, so just hidden div). Adding 'inview' event listeners to such elements immediately triggered 'inview' despite they were not really visible.

Adding

if (!$element.is(':visible')) {
    continue;
}

to checkInView after variables declaration worked for me, but maybe there's a better way.

Really sorry for robust issuing, but have no time now for pull request or more elaborate investigation.

[mattandrews]

Yes, have seen this behaviour too. Not even using a "hidden" div, just by changing my browser focus to another tab then dynamically injecting an element into the other tab via AJAX triggers the inView callback despite the tab not actually being in view.

[joshribakoff]

I'm having another similar issue. Here is my markup

<div style="display:none"></div>

I would expect the event to fire only when I scroll to where that element "would be" on the page if it were visible. Instead it fires immediately on page load even if that div is all the way in the footer, well below the fold. Change it to this works fine:

<div style="display:block"></div>

My workaround had to be a bit different than @aabakym. What I ended up doing was instead of binding the inview event directly to my hidden div, I used jquery to insert an empty but technically visible "marker" div and bind to that instead:

$('.hidden').after('<div class="visible-marker"></div>');
$('.visible-marker').livequery('inview', function() {
  // now use jquery to find the div adjacent to $(this) to traverse back to the .hidden div.
});

It would technically be possible for jquery.inview to handle this for me internally so its abstracted away from me as a user.