1721256 - Element width explodes in reduced test-case in Firefox

Status: NEW

(Core :: Layout, defect)

Description

[Thomas Wisniewski [:twisniewski]]

Attachment: testcase.html

I'm not quite sure why, but with the combination of CSS in this reduced test-case Firefox causes an element to become ridiculously wide in Firefox's responsive design mode (and on Firefox on Android). Chrome does not; the "should see this" text appears on the top/right of the page as I would expect at first glance.

This is an interop issue, as it's causing layout issues on ekoplaza.nl, as reported at https://webcompat.com/issues/75224

Comment 1

[Hiroyuki Ikezoe (:hiro)]

I am pretty sure we have an open bug for this kind of issues, negative-positioned elements expand scroll port.

Comment 2

[Daniel Holbert [:dholbert]]

A few observations:

(1) In Desktop RDM mode, to make the "SHOULD SEE THIS" text be actually-hidden (to fully reproduce the bug), you have to enable touch events via the "pokey finger" button at the top right of the RDM header bar.

(2) RE "Firefox causes an element to become ridiculously wide" -- that part isn't actually surprising. The category-bar element is super-wide in all browsers, because it's styled to be wide. Its left: -9999px; right: -9999px; styling puts its left edge 9999px off of the screen on both sides, so it's approximately 19998px wide (plus the screen width).

The interesting questions here are really:
(a) whether that wide element contributes to the scrollable overflow, given that it's also positioned off the top of the screen (top:-100%) and so its overflowing left/right parts can't be reached since they're vertically out of view
(b) whether that wide element contributes to the size of the fixed-position viewport (the rectangle that is used for positioning the right:0px "SHOULD SEE THIS" text)

In regular Firefox for Desktop, the answers are (a) no and (b) no. If I enable RDM, then (a) changes to "yes". If I additionally enable touch events, then (b) also changes to "yes". And in Firefox on Android, (a) and (b) are both "yes".
[EDIT: Sorry, this wasn't quite right; I'll strike it & clarify in a subsequent comment.]

Comment 3

[Daniel Holbert [:dholbert]]

(In reply to Daniel Holbert [:dholbert] from comment #2)

The interesting questions here are really:
(a) whether that wide element contributes to the scrollable overflow, given that it's off the top of the screen and so its overflowing left/right parts can't be reached since they're vertically out of view

In Firefox, on desktop and Android: yes
In Chrome, on desktop and Android: no

(b) whether that wide element contributes to the size of the fixed-position viewport (the rectangle that is used for positioning the right:0px "SHOULD SEE THIS" text)

Chrome (desktop and Android): no
Firefox on Desktop (regular and RDM-with-default-configuration): no
Firefox on Desktop with RDM and touch events enabled: yes
Firefox on Android: yes

One further note: if I remove top:-100% from the offscreen element (bringing it onscreen), then Chrome on desktop (and I assume mobile) changes its answers for (a) and (b) to both be "yes". Firefox does not seem to change its behavior; we still are "no" on (b) for Firefox on desktop/desktop-with-default-RDM-settings.

Comment 4

[Daniel Holbert [:dholbert]]

In any case: question (a) seems to be tracked in bug 1267004, and I think fixing that would be sufficient to fix this webcompat issue.

Comment 5

[Dennis Schubert [:denschub]]

No known WebCompat breakage for this - unsetting the webcompat-priority flag.