tuax/tua-body-scroll-lock

Incompatible with position:sticky on Android

thisisjamessmith opened this issue · 3 comments

thisisjamessmith commented

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

how about this?
image

same as #63

BuptStEve commented

Feel free to reopen if the problem still exists~

thisisjamessmith commented

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.