固定元素 Y 位置在 android 的 chrome 上滚动后计算错误

Question

Happens when address bar becomes hidden/visible.

The element marked on the DOM explorer is the same element shown on the bottom of the screen (with the "Start Planning" button). After scroll it's actual location is being scrolled up (even though it is in fixed position), but no re-rendering occurs since it is still displayed on the screen in the correct position.

The interesting thing is that the element does not respond to clicks in the displayed area but rather in the DOM calculated area (aka, if you click above the button it works but not when you click on the button itself).

Here is the link the page on our platform that has the issue:

https://in-office.wekudo.com/wellness/category/nutrition/smoothie-bar

Same issue exists also on Airbnb's platform:

https://www.airbnb.com/rooms/select/17017021?search_id=74b85b09-c47b-4d33-854a-c42ffa1d7779&federated_search_id=93685a2b-81cc-49a4-9699-2e6adb1c1a25

Answer 1

The bug seems to be related to hammer.js:

https://github.com/hammerjs/hammer.js/issues/1171

Answer 2

在 CSS 中，请添加overflow-y: visible !important;