The bug is here
https://github.com/flackr/scroll-timeline/blob/master/src/scroll-timeline-base.js#L570-L585
while (node = getContainingBlock(node)) {
const style = getComputedStyle(node);
switch(style['overflow-x']) {
case 'auto':
case 'scroll':
case 'hidden':
// https://drafts.csswg.org/css-overflow-3/#overflow-propagation
// The UA must apply the overflow from the root element to the viewport;
// however, if the overflow is visible in both axis, then the overflow
// of the first visible child body is applied instead.
if (node == document.body &&
getComputedStyle(document.scrollingElement).overflow == "visible")
return document.scrollingElement;
return node;
}
}
The function getScrollParent currently only checks style.overflowX, which is incorrect because vertical scrolling depends on overflowY.
This means an element will only be considered a scroll container if it has horizontal (overflowX) scrolling.
The bug is here
https://github.com/flackr/scroll-timeline/blob/master/src/scroll-timeline-base.js#L570-L585
The function getScrollParent currently only checks style.overflowX, which is incorrect because vertical scrolling depends on overflowY.
This means an element will only be considered a scroll container if it has horizontal (overflowX) scrolling.