OverlayScrollbars icon indicating copy to clipboard operation
OverlayScrollbars copied to clipboard

iOS <=16.1.1 - Scrolling becomes locked when overlayscrollbars is initialized

Open lincolnthree opened this issue 4 months ago • 8 comments

Describe the bug When overlay scrollbars are initialized, scrolling is locked even though there is overflow. The same code works in newer iOS/Safari mobile environments and on other platforms, so I am not sure what is happening exactly. I believe it has to do with the measurement of overflow in Safari of this version.

Is there any way to disable scroll locking through the config?

overflowAmount is always 0, hasOverflow is always false: image

Other devices with the same code report overflow correctly: image

I think it may be also related to this change, though I am not super familiar with the internals of OLS: https://github.com/KingSora/OverlayScrollbars/commit/082e275c342eb0b9ebcb3a4c3f773c9b6d63550d#diff-e23943117c0ab8a43c6f67973a7535bceee73babb7404d15118e8ad52df12776R136

To Reproduce

  1. Visit https://www.topdecked.com/news (or other affected screens like /decks or /cards) on an affected iOS device,
  2. Attempt to scroll. It won't work.

Note: https://www.topdecked.com itself works because overlayscrollbars is not initialized on the home screen (same for some other screens.)

Expected behavior Scrolling should work and should not be locked.

Examples

Apologies. It will be difficult to create a sample of this as we have a custom integration and are using Ionic framework, but the bug does not appear to be present in overlayscrollbars 1.8.x

But here is our init code:

    const scrollbars = OverlayScrollbars({
      target: elements.viewport,
      elements: {
        viewport: elements.viewport,
        content: elements.fixed,
        host: elements.content,
        padding: null
      },
      scrollbars: {
        slot: elements.background
      }
    }, {
      overflow: {
        x: 'scroll',
        y: 'scroll'
      },
      update: {
        debounce: 30,
        ignoreMutation: _mutation => {
          return false;
        }
      },
      scrollbars: {
        autoHide: options.utils.platform.isDesktop() ? 'never' : 'scroll',
        autoHideDelay: 1000,
        autoHideSuspend: false,
        dragScroll: true,
        visibility: 'visible',
        clickScroll: true,
        theme: 'os-theme-topdecked'
      },
      showNativeOverlaidScrollbars: false
    }

Environment

  • Used Operating System(s): iOS 16.1.1
  • Used Browser(s) (with version): Safari 16.1.1 and prior

Additional context Add any other context about the problem here.

lincolnthree avatar Oct 11 '24 20:10 lincolnthree