Firefox Android: Element picker selectable area scrolls with page

[evnhali]

Prerequisites

• I verified that this is not a filter issue (MUST be reported at filter issue tracker)
• This is not a support issue or a question
• I performed a cursory search of the issue tracker to avoid opening a duplicate issue
• The issue is not present after wholly disabling uBlock Origin ("uBO") in the browser
• I checked the documentation to understand that the issue I report is not a normal behavior

I tried to reproduce the issue when...

• uBO is the only extension
• uBO with default lists/settings
• using a new, unmodified browser profile

Description

On Firefox Android, if I scroll a webpage, the element picker selectable area (marked by a grey overlay) scrolls up with the page briefl before stopping, leaving about 1/8 of the page unselectable. This makes it impossible to select elements that only appear on scroll and are fixed to the bottom edge of the screen.

A specific URL where the issue occurs

https://www.spin.com/2021/11/travis-scott-sued-over-predictable-and-preventable-astroworld-tragedy/

Steps to Reproduce

1. Open a scrollable webpage in Firefox Android.
2. Open the Ublock Origin element picker.
3. Swipe up to scroll the page down a bit.

Note: the behaviour is the same if steps 2 and 3 are reversed, but opening the picker first makes it easier to see what's happening.

Expected behavior

The element picker overlay covers the entire visible area of the page, allowing all elements to be selected.

Actual behavior

The element picker overlay moves up a short distance along with the page contents, leaving the bottom of the page un-selectable.

uBlock Origin version

1.38.6

Browser name and version

Firefox 94.1.1 (Build #2015842491)

Operating System and version

Android 11, kernel version 4.14.190-perf+ #1 Sun Sep 26 18:44:03 CST 2021, build number GM1915_21_210926

I can reproduce on spin.com but not here on Github.

[gorhill]

I don't understand why this is happening, uBO's iframe has position: fixed !important and height: 100vw !important, it should not scroll up. I thought this could be a case of the page using transform style property, but I don't see this.

Elements from page navigation menu seem to stretch the layout horizontally. Removing them fixes the issue.

[gorhill]

There is an inline style element with id elementor-frontend-inline-css in there, packed with declarations, and once deleted the viewport is back to making sense.

It's as if there is a css transform going on in there, affecting the picker, but the browser's inspector reveals nothing. I don't know if this can be fixed, assuming we can understand the root cause of the behavior in the first place.

I am using Chromium's device emulator to investigate.

[u-RraaLL]

Same thing happens on https://new.reddit.com/r/uBlockOrigin.

Here I've tracked down the root cause to this element:

<div style="left:-8px;height:48px" class="_26j3FxU4jTfjqi8m96HMmI _26j3FxU4jTfjqi8m96HMmI ">/div>

Disabling either its inline height: 48px; or ._2L5G9B5yaoqW3IegiYN-FL ._26j3FxU4jTfjqi8m96HMmI's width: 512px; fixes the problem.

---

Interesting, I tested all available phone models in FF's Responsive Design Mode and it looks like the problem doesn't exist only on: Galaxy S10/S10+Linux Chrome 87

The "phone" has only 360px screen width in the emulator, yet the navbar fits the screen, ignoring the above element.