Fenix: [Bug] Page will always scroll to show/hide dynamic toolbar, even if page should not scroll (e.g. drawing, touch-based games)

Created on 8 Aug 2020  ·  7Comments  ·  Source: mozilla-mobile/fenix

Steps to reproduce

Have a page with an element that listens for touch events, with event.preventDefault() in place.

Example code: https://gist.github.com/Pomax/50cdb4090be48ca088bb57169f086292
Live example: https://flat-holly-winterberry.glitch.me/

Scroll to the canvas element, and then tap-and-drag a circle in it. This will slide the toolbar in and out and in and out and in and out, which would be fine except it's _also_ moving the page content around, which it should absolutely not be doing.

Expected behavior

The toolbar slides in _over_ the page content, and slides out _revealing_ the page content under it, without affecting page content placement.

Actual behavior

The toolbar slides in/out as if it's part of the page itself, pushing content up/down on the page itself as the user is interacting with it, making touch coordinates completely unreliable.

This makes it impossible to do even basic things like drawing a circle on an element, let alone have a simple on page canvas/js game with reliable controls.

Device information

  • Android device: Galaxy Tab A 10.1
  • Fenix version: nightly
Gesture Toolbar gv 🐞 bug

Most helpful comment

Thanks for the clarification, I'll update the ticket name as well so it's clearer for prioritization.

from "Dragging on a element with preventDefault() for touch events moves the page as it slides the dynamic toolbar in/out"

All 7 comments

This is probably the same underlying issue as #11389

This doesn't feel like the same kind of problem: this use-case is for elements that don't have inate scroll, so even if inate scroll gets fixed, we'll still have a situation where the scroll is "supposed" to be not even forwarded due to event.preventDefault(), which you want to honour (elements should be able to prevent default browser behaviour), while still leaving a way for users to get to the interface under all circumstances: the UI sliding in and out of view is going to be a _horrible_ experience for web games, for example, so there's some heavy thinking about how to solve this.

This feels more like a conflict caused by tying "toggling the UI" to both scroll directions. Ideally, Fenix would have a different way to _reveal_ the UI (not tied to scroll events at all), even if it still gets hidden when scrolling down the page. Solving that problem would "automatically" solve this particular symptom, too.

Thanks for the clarification, I'll update the ticket name as well so it's clearer for prioritization.

from "Dragging on a element with preventDefault() for touch events moves the page as it slides the dynamic toolbar in/out"

I think this was resolved by https://bugzilla.mozilla.org/show_bug.cgi?id=1633322
@Pomax can you please confirm if this is still reproducing or not for you?

Is this something I can test by updating nightly, or do I need to compile things myself? (in which case, that is not really an option for me)

Is this something I can test by updating nightly, or do I need to compile things myself? (in which case, that is not really an option for me)

Should be fixed in the latest Nightly from Playstore.

Yeah, that's no longer sliding the UI in and out of view, very nice! Thanks to all involved.

Was this page helpful?
0 / 5 - 0 ratings