iScroll breaks on new Safari for iOS 11.3 update?

[valnub]

We're using iScroll5 on a <div> element with position:fixed set. Everything has been working perfectly so far but since a few days scrolling on mobile Safari (iPhone) doesn't work properly anymore.

I first thought that it's a bug on our side but then I saw that Nike is using iScroll in the same way and the issues are very similar, see the video here: https://youtu.be/69ujxDii_Rw

Can someone confirm this problem on Safari for iOS 11.3 or is this maybe even a known issue?

[adamrhunter]

@valnub - we're seeing the same problem. it seems like the scroll events are being passed through to the container elements. causing scrolling of the container as well as the child.

[valnub]

We solved the issue by disabling document scrolling when the layer is open and enabling it when layer is closed:

function enableDocumentScrolling() {
  const body = document.getElementsByTagName('body')[0];
  body.style.position = 'static';
  body.style.top = 'auto';
  body.style.bottom = 'auto';
  body.style.overflow = 'auto';
}

function disableDocumentScrolling() {
  const body = document.getElementsByTagName('body')[0];
  body.style.position = 'fixed';
  body.style.top = 0;
  body.style.bottom = 0;
  body.style.overflow = 'hidden';
}

[Saintless]

I had what I seems to be at least partially the same issue when using our app on iOS 11.3. I was able to fix it by upping the setTimeout around the initialization from 0 to 1000, along with setting the eventPassthrough property to false when initializing.

[valnub]

@Saintless The issue happens when iScroll is initialized to early, therefore your setTimeout workaround works but it's not good practice. It's better to listen for the usual events (ready, onload, deviceready...) and then initialize iScroll rather than using setTimeout.