adapt_framework: inview does not measure out-of-bounds correctly

[oliverfoster]

The isOutOfBounds function in inview.js assumes that a child will be out-of-bounds in a scrolled container. It is possible to position an element outside of the visible bounds of a parent using many other methods. Checking for container scrolling before checking child offsets is poor logic.

adapt_framework/src/core/libraries/inview.js

Lines 543 to 573 in 833b4ef

	isOutOfBounds: function(element, parent) {
	var isScrollWidthOverflowing = (parent.clientWidth < parent.scrollWidth);
	var isScrollHeightOverflowing = (parent.clientHeight < parent.scrollHeight);
	var isOverflowing = (isScrollWidthOverflowing || isScrollHeightOverflowing);
	var $parent = $(parent);
	if (!isOverflowing || ($parent.css("overflow") === "visible")) {
	return false;
	}
	var $element = $(element);
	var childPos = $element.offset();
	var parentPos = $parent.offset();
	var childOffsetTop = (childPos.top - parentPos.top);
	var childOffsetLeft = (childPos.left - parentPos.left);
	var childOffsetBottom = (childOffsetTop + element.clientHeight);
	var childOffsetRight = (childOffsetLeft + element.clientWidth);
	// check inclusive of bounding rectangle edges
	var isOutOfBounds = (childOffsetTop >= parent.clientHeight
	|| childOffsetLeft >= parent.clientWidth
	|| childOffsetBottom <= 0
	|| childOffsetRight <= 0);
	return isOutOfBounds;
	}

Example:
When a 3 item narrative is moved to the last item, the middle item is currently considered onscreen. $('.narrative__slider-image-container[data-index=1]').onscreen().onscreen