search

tuax / tua-body-scroll-lock

🔐 Body scroll locking that just works with everything
https://tuax.github.io/tua-body-scroll-lock/
MIT License
418 stars 30 forks source link

Incompatible with position:sticky on Android #71

Closed thisisjamessmith closed 10 months ago

thisisjamessmith commented 11 months ago

Version Version 1.4.0

Describe the bug There's some UA sniffing code in the library which targets Android and sets the body element to be position: fixed with a top offset to fake a scroll to the current scroll position. Unfortunately this makes any headers that use position:sticky stop being sticky.

To Reproduce Steps to reproduce the behavior:

  1. Have a site with a sticky header and a mobile navigation that triggers the body scroll lock
  2. The mobile nav should have a top offset so that the sticky header is still visible when it's on
  3. Switch on the mobile nav
  4. See that the sticky header has disappeared offscreen.

If you don't have an Android device you can see this problem easily using the device emulator tools in Chrome and Firefox's inspectors which pass through the appropriate UA string.

BuptStEve commented 10 months ago

how about this?

image

same as https://github.com/tuax/tua-body-scroll-lock/issues/63

BuptStEve commented 10 months ago

Feel free to reopen if the problem still exists~

thisisjamessmith commented 10 months ago

Thanks for getting back to me so quickly, and also thanks for your work on this very useful library. This seems to work ok, at least testing on the Chrome inspector's emulator. It doesn't work on Firefox's emulator unfortunately, and I haven't had a chance to test on a real android device yet.