bug: ion-infinite-scroll fires continuously (position="top") or never (position="bottom") when the scroll element is flex-direction: column-reverse #31602

Ionic Framework Version

v9.x (9.0.7)

Current Behavior

A chat-style page lays the scroll element out bottom-up with ion-content::part(scroll) { display: flex; flex-direction: column-reverse; } so that the newest row sits at the bottom and the scroller starts there. In that layout the browser's scrollTop is 0 at the bottom and goes negative towards the top ([-320, 0] in the reproduction).

ion-infinite-scroll computes its distance as if scrollTop were non-negative (core/src/components/infinite-scroll/infinite-scroll.tsx L121–129):

const distanceFromInfinite =
  this.position === 'bottom'
    ? scrollHeight - infiniteHeight - scrollTop - threshold - height
    : scrollTop - infiniteHeight - threshold;

With the trigger placed at the oldest end of the list (the last DOM child, painted at the top) and threshold="100px":

Scroller in the reproduction: scrollHeight 1164, clientHeight 844, so the whole scrollable range is 320 px.

connectedCallback (L96–101) and complete() (L184–200) also write scrollEl.scrollTop = scrollHeight - clientHeight / scrollHeight - prev for position="top", which are positions outside the [-320, 0] range of a column-reverse scroller.

Expected Behavior

The trigger fires once when the user is within threshold of the trigger element, whichever direction the scroll element grows in.

Steps to Reproduce

1. <ion-content> with the style above, 60 rows of 48 px, and <ion-infinite-scroll position="top" threshold="100px"> as the last child (so it paints at the top).
2. Listen to ionInfinite, call complete() in the handler, and set scrollTop to -5, -20, -60, … on the scroll element returned by getScrollElement().
3. Observe one ionInfinite per step. Switch to position="bottom" and scroll all the way up: no event.

Ionic Info

@ionic/core 9.0.7, Chromium 142 (Playwright headless).