I've seen some really odd results using the offset option. Perhaps I've missed something or the documentation needs updating to make its use clear?
My understanding is that a positive offset should reduce the viewport dimensions top and bottom by the value e.g. :in-viewport(100) would make the viewport shorter by 200 pixels. Conversely, a negative would increase the viewport height allowing detection of objects before they appear on-screen.
The current release works for me if the element starts outside of this new viewport but if I refresh the page and the element is inside the viewport, then :in-viewport(100) returns false until I scroll to a position where the element starts to leave the viewport.
I think that there are 2 issues, first this code - I think it should be removed;
if (settings.tolerance < 0) { settings.tolerance = $viewportHeight + settings.tolerance; // viewport height - tol }
Secondly, this line;
isVisibleFlag = settings.tolerance ? top <= settings.tolerance && bottom >= settings.tolerance : bottom > 0 && top <= $viewportHeight;
I suggest it's changed to;
isVisibleFlag = settings.tolerance ? (bottom >= settings.tolerance && top <= $viewportHeight - settings.tolerance) : bottom > 0 && top <= $viewportHeight;
I now get the results I had expected.
I've seen some really odd results using the offset option. Perhaps I've missed something or the documentation needs updating to make its use clear?
My understanding is that a positive offset should reduce the viewport dimensions top and bottom by the value e.g.
:in-viewport(100)would make the viewport shorter by 200 pixels. Conversely, a negative would increase the viewport height allowing detection of objects before they appear on-screen.The current release works for me if the element starts outside of this new viewport but if I refresh the page and the element is inside the viewport, then
:in-viewport(100)returns false until I scroll to a position where the element starts to leave the viewport.I think that there are 2 issues, first this code - I think it should be removed;
if (settings.tolerance < 0) { settings.tolerance = $viewportHeight + settings.tolerance; // viewport height - tol }Secondly, this line;
isVisibleFlag = settings.tolerance ? top <= settings.tolerance && bottom >= settings.tolerance : bottom > 0 && top <= $viewportHeight;I suggest it's changed to;
isVisibleFlag = settings.tolerance ? (bottom >= settings.tolerance && top <= $viewportHeight - settings.tolerance) : bottom > 0 && top <= $viewportHeight;I now get the results I had expected.