Ionic content scroll position strange behaviour on firefox and safari

Ionic Framework
1

I’m building an infinite scroll app. It may have 2k+ elements to load and I’am appending elements with ion-infinite-scroll element and listening to ionInfinite.

As I append new items, I am removing earlier items from content, so the app stays smooth. The scroll behaviour downwards is correct. As new items are appended the scrollbar jumps up.

The problem starts when I need to append items on the opposite direction, upwards. To do so I am listening to scroll events and appending items accordingly with the following function:

['ionScroll', 'ionScrollEnd'].forEach(function(evt) {
        document.getElementById('product_content').addEventListener(evt, function() {
          document.getElementById('product_content').getScrollElement().then(ok => {
            var offsetTop = 600
            if (evt == 'ionScrollEnd') offsetTop = 200
            if (ok.scrollTop <= offsetTop && removedElementHtml.length > 0) {
              var qtyToAppend = lastAppendedQty
              if (evt == 'ionScrollEnd') qtyToAppend = removedElementHtml.length
              for (let index = 0; index < qtyToAppend; index++) {
                if (removedElementHtml[removedElementHtml.length - 1]) {
                  list.insertBefore(removedElementHtml[removedElementHtml.length - 1], list.firstChild);
                  removedElementHtml.splice(-1, 1)
                  list.lastChild.remove()
                  length--
                }
              }
              infiniteScroll.disabled = false;
            }
          })
        }, false);
      });

The problem that these event does not fire a scrollbar position recalculation on safari and firefox.
So lets say the user scrollposition is lower than 600, iex: 570, and the code appends 10 items upwards. The scrollTop value is not recalculated and stays on the same value, 570. This does not happen on chrome. On chrome the scrollbar position is recalculated and jumps down, the scrolltop on chrome will then become 570+ appended items height.

My guess is that the ion infinite scroll is calling an event for the browser to recalculate content height. As I am listening to scrollTop position to append items upwards, this same event is not fired when scrolling upwards.
Which events are being called with infinite scroll? How can I force the browser to recalculate content height and position the scrollbar accordingly?

Thanks

2

So, I noticed that chrome and firefox have different ways to handle the promise for calculating scrollTop position.

See the following code:

document.getElementById('product_content').getScrollElement().then(ok => {
var firstS = ok.scrollTop
list.insertBefore("html", list.firstChild);
var secondS = ok.scrollTop
})

in chrome the variables firstS and secondS will have different values, because the scrollTop position is recalculated. In firefox it is not, no matter if I set a timeout or not. To recalculate, I need to call getScrollElement() again in firefox or safari. This will then cause some kind of stuttering while repositioning scroll position like chrome does. My guess is that in firefox and safari, the refresh rate of elements are done more frequently, so it is harder to get things done without user noticing. Does anyone have any ideas on how to solve this?