body-scroll-lock icon indicating copy to clipboard operation
body-scroll-lock copied to clipboard

Published 20 hours ago • verified publisher icon willmcpo

disableBodyScroll with scrollY > 0 leads to a gap on Firefox Mobile

Open mxeff opened this issue 3 years ago • 4 comments

Browser: Firefox Mobile 81.1.1

OS: Android 10

Description: I'm building a fixed scrollable list with 60% viewport height.

Problem: When calling disableBodyScroll on the list with a scrollY-Value greater than 0, scrolling to the bottom of the fixed list leads to a gap above the html-tag.

Example: https://meowing-wry-mice.glitch.me/ (I included a timeout of 2000ms to be able to scroll before disableBodyScroll is called).

Screen_Recording_20201005-193212_Firefox

mxeff avatar Oct 05 '20 17:10 mxeff

I can't replicate on Firefox v81 on MacOS - seems like a Firefox Mobile bug. Can you use devtools or something to find out what the gap consists of (e.g. is it margin, padding etc)?

diachedelic avatar Oct 05 '20 23:10 diachedelic

Sure, here you go - it doesn't seem to be a styled spacing. I'm guessing that it's caused by the sticky address bar. Screenshot_20201006-083552_Firefox

When toggling overflow: hidden on html via DevTools the gap disappears until I scroll again in the list and reach either the top or bottom end.

mxeff avatar Oct 06 '20 06:10 mxeff

This looks very much like a bug in Firefox Mobile - if you can find a workaround we might be able to use it.

diachedelic avatar Oct 06 '20 22:10 diachedelic

Still seeing the issue, any updates or possible work around?

fernyherrera avatar Feb 22 '23 23:02 fernyherrera