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

Published 20 hours ago • verified publisher icon willmcpo

Does not prevent scrolling when swiping on text field

Open tony1377 opened this issue 4 years ago • 9 comments

Hi, nice lib, seems like it covers most scroll locking issues but I noticed that the ios bug where scroll is initiated on a text field isn't prevented atm.

Here's a test case https://geyh3.csb.app/

Steps to reproduce:

  1. Open the attached testcase in iphone 6 ios 11 with Safari or iphone 6s, ios 12, safari
  2. Tap the "Launch demo modal" button.
  3. Tap into the 2nd text field.
  4. Type some text.
  5. Tap the Done button.
  6. Perform a scroll-down gesture (i.e. flick your finger upward), but start the scroll gesture within the bounds of the 2nd text field.

Actual result: The <body> scrolls downward.

Expected result: The yellow <div> (which is a descendant of a position:fixed <div>) should scroll downward. The <body> shouldn't scroll at all, because it's styled as overflow:hidden.

Original safari bug report - https://bugs.webkit.org/show_bug.cgi?id=153856

tony1377 avatar Mar 22 '20 13:03 tony1377

I cannot reproduce on an iPhone 11 running iOS 13.3 in the simulator - does this only occur on real devices?

diachedelic avatar Mar 22 '20 22:03 diachedelic

I don't have access to many simulators via browser stack.

I can replicate it on real devices for

  • iphone 6s, ios 12, safari
  • iphone 6 ios 11 with Safari

tony1377 avatar Mar 23 '20 17:03 tony1377

Ok I will try it out on a real iPhone running iOS 13 and will see if I can reproduce

diachedelic avatar Mar 23 '20 22:03 diachedelic

It doesn't occur on ios 13 from what I could see, but it does on ios 12 & 11. Do you have access to those?

tony1377 avatar Mar 24 '20 09:03 tony1377

Looks like https://geyh3.csb.app/ is broken?

diachedelic avatar Mar 25 '20 04:03 diachedelic

ah, looks like codesandbox have changed something about how they generate their urls, the same example now lives at https://geyh3.codesandbox.io/

tony1377 avatar Mar 26 '20 15:03 tony1377

Okay I can confirm the issue occurs on iOS 12.4 but not iOS 13.3, on the iPhone simulator. Seems like more a bug with iOS than a bug with this library, and it's something of an edge case too - do you mind if I close this issue, seeing as it will be fixed with time? Unless you want to submit a PR...

diachedelic avatar Mar 26 '20 22:03 diachedelic

Unfortunately I don't have time for that, might be worthwhile keeping this open incase others find workarounds later though?

tony1377 avatar Apr 09 '20 12:04 tony1377

嗨，不错的库，它似乎涵盖了大多数滚动锁定问题，但我注意到在文本字段上启动滚动的 ios 错误并没有阻止 atm。

这是一个测试用例https://geyh3.csb.app/

重现步骤：

  1. 使用 Safari 或 iphone 6s、ios 12、safari 在 iphone 6 ios 11 中打开附带的测试用例
  2. 点击“启动演示模式”按钮。
  3. 点击第二个文本字段。
  4. 输入一些文本。
  5. 点击完成按钮。
  6. 执行向下滚动手势（即向上轻弹手指），但在第二个文本字段的范围内开始滚动手势。

实际结果：向下 滚动<body>。

预期结果： 黄色<div>（它是 position:fixed 的后代<div>）应该向下滚动。根本不应该滚动，因为它的样式 为<body>``overflow:hidden.

原始 Safari 错误报告 - https://bugs.webkit.org/show_bug.cgi?id=153856

They stopped the repairs. I had to do it myself, in the same way, with a new version of typeScript. And fix these problems for everyone to use. add react hooks、vue3 example

npm i body-scroll-lock-upgrade

repair log，Refer to the releases page.

rick-liruixin avatar May 06 '23 03:05 rick-liruixin