Menu
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
772
To get or set the scroll position of an element, you follow these steps: First, select the element using the selecting methods such as querySelector() . Second, access the scroll position of the element via the scrollLeft and scrollTop properties.
To make div fixed scrolling to that div with CSS, we can use the position: sticky CSS property. position: -webkit-sticky; position: sticky; top: 0; z-index: 1; to set position to sticky and z-index to 1 to make the element with the sticky position show on top after we scroll to it.
An element with position: fixed; is positioned relative to the viewport, which means it always stays in the same place even if the page is scrolled. The top, right, bottom, and left properties are used to position the element.
The bug seems to be related to hammer.js:
https://github.com/hammerjs/hammer.js/issues/1171
167
In CSS, please add overflow-y: visible !important;
28
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
