Logic broken for tall elements and partial = true #49
Description
Hi,
Where getBoundingClientRect is available, the current algorithm checks to see whether the top OR the bottom are visible to consider the element partially visible. However, for tall elements the top of the element can be above the viewport and the bottom of the element below. This causes the function to return "false" in spite of the element being visible.
The partial case can't be driven from top OR bottom being visible. Instead you need to check whether the top is above the bottom of the viewport AND the bottom is below the top of the viewport.
The same logic also needs to apply to left & right.
The legacy browser code is OK.
if (typeof t.getBoundingClientRect === 'function'){
// Use this native browser method, if available.
var rec = t.getBoundingClientRect(),
tViz = rec.top >= 0 && rec.top < vpHeight,
bViz = rec.bottom > 0 && rec.bottom <= vpHeight,
lViz = rec.left >= 0 && rec.left < vpWidth,
rViz = rec.right > 0 && rec.right <= vpWidth,
tBounds = rec.top < vpHeight,
bBounds= rec.bottom > 0,
lBounds = rec.left < vpWidth,
rBounds = rec.right > 0,
vVisible = partial ? tBounds && bBounds : tViz && bViz,
hVisible = partial ? lBounds && rBounds : lViz && rViz;
if(direction === 'both')
return clientSize && vVisible && hVisible;
else if(direction === 'vertical')
return clientSize && vVisible;
else if(direction === 'horizontal')
return clientSize && hVisible;
}