odoo/odoo#189337
Created by Website, Benjamin Vray (bvr)
Statuses:
- legal/cla: Contributor License Agreement check
- ci/runbot: Odoo Test Suite
- ci/upgrade_enterprise: Test upgrades for enterprise master
- ci/template: Contact runbot team on discord for help.
- ci/style: Optional style check. Ignore it only if strictly necessary.
- ci/security: Required security check. Can only be ignored by security team.
- label
- odoo-dev:18.0-fix-blocked-scroll-down-bvr
- head
- f129e8e21d4236aa45efa09be09f74194193c3c4
- merged
- 10 months ago by Website, Quentin Smetz (qsm)
| odoo/odoo | |
|---|---|
| 18.0 | #189337 |
| saas-18.2 | |
| saas-18.3 | |
| saas-18.4 | |
| 19.0 | |
| master | #189817 |
[FIX] website: fix scrolling issue on mobile devices
Since commit [1], where the frontend scrolling was moved back out of the
'#wrapwrap', an issue sometimes occurs with the standard effect when
scrolling on mobile page.
Steps to reproduce:
- Go to a website with "e-commerce" installed.
- Use the devtools to display the website on a mobile device (note that
the bug may only occur on certain mobile devices, so it might be
necessary to test several to reproduce it). - Add a product to the cart and go to the "/shop/checkout" page.
- Try scrolling down.
- Bug: scrolling is blocked.
The bug happens because, when the page starts scrolling with the
"standard" header, there’s a short moment when the header has a
"translate: transform" applied but is not yet "affixed." This creates a
new coordinate system for the header and affects its child elements,
like the "off-canvas mobile" navbar. As a result, the
"off-canvas mobile" navbar temporarily changes the page size, which
causes scrolling issues, especially on mobile devices.
To fix this, we add "display: none" to the "off-canvas mobile" navbar
during this short moment so it no longer affects the page size.