thenikso / angular-inview

AngularJS directive to check if a DOM element is in the browser viewport.
http://thenikso.github.io/angular-inview/
MIT License
480 stars 112 forks source link

intersectRect fails testcase for height 0 #123

Closed VincentJ711 closed 7 years ago

VincentJ711 commented 7 years ago

if the element's height is 0 or the containers height is 0, intersectRect should return false. If either the container or element has height 0, it doesn't make sense to say it intersects the other. Whichever's height is 0 implies that it visibly does not exist and therefore it cannot intersect anything. I suggest making intersectRect as this:

function intersectRect (r1, r2) { if (!r1.height || !r2.height) { return false; } return !(r2.left > r1.right || r2.right < r1.left || r2.top > r1.bottom || r2.bottom < r1.top); }

My use case involves toggling the display of the container. Because of this, the height of the container goes to 0 when the display goes to none. The issue is that the map/scan/filter functions do not fire after the height has changed to 0, they fire just before. So, I'm using the throttle option to fire the map/scan/filter functions after 50ms or so, so that the container height of 0 is correctly taken into consideration when the display of the container goes to none. This led me to adding the height of 0 check for the element/container in intersectRect and this solved the problem.

To be honest it was a big problem since it was evaluating the 500 items in my ng-repeat to all be true since the element and container had height 0.

Hope this helps other people with a similar use case.

VincentJ711 commented 7 years ago

It seems as though this is an alternate solution to #113 . No issue here now.