[touch] Scroll glitching in pages with a fixed 100vh background image
Categories
(Core :: Panning and Zooming, defect, P3)
Tracking
()
People
(Reporter: doug.hs, Unassigned)
References
Details
User Agent: Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:70.0) Gecko/20100101 Firefox/70.0
Firefox for Android
Steps to reproduce:
There are 3 pages, including one I develop, that suffer from this glitchy behavior:
https://www.w3schools.com/howto/tryhow_css_fullpage_demo.htm
http://oscarone.varofthemes.com/
http://191.252.204.98/en/
Visit any of them on Firefox for Android or another OS with touch screen functionality. Make sure you scroll past the background image. It won't be reproducible on top of the background image, only on content below it. Then start scrolling up and down without taking the finger off the screen.
Actual results:
Due to how the address bar on Firefox disrupts the viewport height, you will see the background image resize abruptly, the content below will "jump" out of its place and the scrolling position will be locked. You will be prevented from scrolling unless you take your finger off the screen and scroll again.
Expected results:
The scrolling shouldn't lock in place. The contents of the page shouldn't be disrupted by the Firefox UI.
On Google Chrome, the address bar doesn't disrupt the viewport height, so none of these glitches are reproducible there.
There is only one website (which contains the same features) where I cannot reproduce this, at all:
Something in that page makes it immune to this problem. I haven't been able to figure it out. Maybe it's a JavaScript fix.
Additional information:
Firefox version: 68.2.0 (latest from Google Play at this time)
Devices tested:
- Motorola Moto G4 Play (LineageOS 7.1.2)
- Samsung Galaxy J5 (Android 6.0.1)
Edit: the IP address up there won't take you to the right page any more. Go to dougsilva.me instead.
After experimenting with the source code of resume.hakr.gg here, I was able to reproduce the problem when I removed the "viewport" meta tag. Removing it causes the website to display on a phone as if it was on a desktop screen, and the scrolling glitch becomes reproducible.
I played with its "content" attributes. If you remove all of them, it becomes reproducible. If any one of the attributes are still there, the glitch is absent.
|
||
Comment 3•5 years ago
|
||
(In reply to doug.hs from comment #0)
On Google Chrome, the address bar doesn't disrupt the viewport height, so none of these glitches are reproducible there.
This suggests bug 1586144 should help with this.
|
||
Comment 4•5 years ago
•
|
||
I've confirmed that bug 1586144 and relevant PRs for android-components and reference-browsers fix this issue.
|
|
||
Comment 5•5 years ago
|
||
Now bug 1586144 has been fixed and corresponding changes for android-components have been already merged (this and this). Browsers (Fenix or reference-browser) need to call setDynamicToolbarMaxHeight (which was introduced in bug 1586144) in an appropriate place, but it hasn't yet done. That's said, Fenix doesn't support dynamic toolbar yet, once it's supported, this issue will be solved. I am going to close this.
Description
•