OverlayScrollbars
OverlayScrollbars copied to clipboard
iOS <=16.1.1 - Scrolling becomes locked when overlayscrollbars is initialized
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
:
Other devices with the same code report overflow correctly:
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
- Visit https://www.topdecked.com/news (or other affected screens like /decks or /cards) on an affected iOS device,
- 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.