diff --git a/extensions/amp-list/0.1/amp-list.js b/extensions/amp-list/0.1/amp-list.js index 5eaae8ef19fb..7f82c031f20f 100644 --- a/extensions/amp-list/0.1/amp-list.js +++ b/extensions/amp-list/0.1/amp-list.js @@ -1556,8 +1556,9 @@ export class AmpList extends AMP.BaseElement { } /** - * If the bottom of the list is within three viewports of the current - * viewport, then load more items. + * If the bottom of the list is visible and + * within three viewports of the current viewport, + * then load more items. * @private */ maybeLoadMoreItems_() { @@ -1570,7 +1571,10 @@ export class AmpList extends AMP.BaseElement { .getClientRectAsync(dev().assertElement(endoOfListMarker)) .then((positionRect) => { const viewportHeight = this.viewport_.getHeight(); - if (3 * viewportHeight > positionRect.bottom) { + if ( + positionRect.bottom > 0 && + 3 * viewportHeight > positionRect.bottom + ) { return this.loadMoreCallback_(); } }); diff --git a/extensions/amp-list/0.1/test/test-amp-list.js b/extensions/amp-list/0.1/test/test-amp-list.js index cd3e6fe9367c..d5e57560a81c 100644 --- a/extensions/amp-list/0.1/test/test-amp-list.js +++ b/extensions/amp-list/0.1/test/test-amp-list.js @@ -466,12 +466,13 @@ describes.repeated( }); }); - it('should resize with viewport', () => { + it('should resize with viewport', async () => { const resize = env.sandbox.spy(list, 'attemptToFit_'); - list.layoutCallback().then(() => { - list.viewport_.resize_(); - expect(resize).to.have.been.called; - }); + const itemElement = doc.createElement('div'); + expectFetchAndRender(DEFAULT_FETCHED_DATA, [itemElement]); + await list.layoutCallback(); + list.viewport_.resize_(); + expect(resize).to.be.calledOnce; }); // TODO(choumx, #14772): Flaky.