1943920 - add.org - The menu overlays the web content

Status: ASSIGNED

(Web Compatibility :: Site Reports, defect, P2)

Description

[railioaie]

Environment:
Operating system: Android 15
Firefox version: Firefox Mobile 136.0

Preconditions:
Clean profile

Steps to reproduce:

1. Navigate to: https://add.org/adhd-facts/
2. Observe

Expected Behavior:
The page is displayed correctly

Actual Behavior:
The menu overlays on the web content

Notes:

• Reproduces regardless of the status of ETP
• Reproduces in firefox-nightly, and firefox-release
• Does not reproduce in chrome

Created from https://github.com/webcompat/web-bugs/issues/147170

Comment 1

[railioaie]

Attachment: 27.01.2025_12.51.02_REC.mp4

Comment 2

[Daniel Holbert [:dholbert]]

Attachment: testcase 1

Here's a testcase from testcase-reducer. This reproduces the issue for me in Responsive Design Mode on desktop in Firefox, vs. it's fine in the same mode in Chrome.

Comment 3

[Daniel Holbert [:dholbert]]

This is unfortunately just a case where the site has some broken CSS that only Firefox recognizes.

They've got their intended transform styling for this menu specified in a -webkit-transform declaration, followed by broken -moz-transform styling (which is ignored in WebKit/Chrome but is honored and overrides the otherwise-working -webkit-transform styles in Firefox).

Quoting lines 2928-2933 in the attached testcase -- note 100% in the -webkit-transform line vs. 0% in the -moz-transform line:

      .mobile-menu-wrapper {
        right: 0 !important;
        left: auto !important;
        transition: transform 0.2s ease-out;
        -webkit-transform: translate(100%, 0);
        -moz-transform: translate(0%, 0);

The original CSS file for the site is https://add.org/wp-content/themes/eduma/style.css and you can find this^ rule there by searching for mobile-menu-wrapper.

The menu works correctly if we ignore their -moz-transform styling (I tested by unticking that style).

I think we can probably sitepatch this with a rule like:

.mobile-menu-wrapper {
  transform:  translate(100%, 0);
}

...to just reapply the good -webkit-transform styling that we're inadvertently overriding.

Comment 4

[Daniel Holbert [:dholbert]]

Note that this would be fixed if we unsupported -moz-transform, and we tried to do that in bug 1855763, but we were forced to reenable it in bug 1901497 and bug 1886134 to avoid other breakage (where sites have Firefox-specific CSS that assumes -moz-transform is supported).

So for now we've got no choice but outreach or sitepatching when sites happen to have broken -moz-transform styling like this.

Comment 5

[Thomas Wisniewski [:twisniewski]]

Attachment: Bug 1943920 - add an Android CSS intervention for add.com/adhd-facts to fix the menu; r?denschub

Comment 6

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/894cc348ea0f
add an Android CSS intervention for add.com/adhd-facts to fix the menu; r=denschub,webcompat-reviewers

Comment 7

[Serban Stanca [:SerbanS]]

https://hg.mozilla.org/mozilla-central/rev/894cc348ea0f