1926506 - www.aliexpress.com - Buttons are not fully visible due to scroll bar

Status: RESOLVED WORKSFORME

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

Description

[Calin Tanase]

Environment:
Operating system: Windows 10
Firefox version: Firefox 131.0/133

Steps to reproduce:

1. Go to https://www.aliexpress.com and access the bundle deals or the super deals. (or go directly to https://www.aliexpress.com/gcp/300000512/nnpage2024?spm=a2g0o.home.3fornn.1.650c76dbqSdiLG&disableNav=YES&pha_manifest=ssr&_immersiveMode=true&channelLinkTag=nn_newgcp )
2. Observe the buttons below the header.

Expected Behavior:
The buttons are fully visible.

Actual Behavior:
The buttons are not fully visible, scrollbar overlap with them.

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/143067

Comment 1

[Calin Tanase]

Attachment: image.png

Comment 2

[Dennis Schubert [:denschub]]

So, this is odd. It's not -webkit-scrollbar. Instead,

<div
  id="1380005573"
  horizontal="true"
  showshorizontalscrollindicator="false"
  scrolleventthrottle="50"
  showsverticalscrollindicator="true"
  class="rax-view-v2 rax-scrollview rax-scrollview-horizontal tab_pc_content"
  style="box-sizing: border-box; display: flex; flex-direction: row; flex-shrink: 0; align-content: flex-start; border-width: 0vw; border-style: solid; border-color: black; margin: 0vw; padding: 0vw; min-width: 0vw; width: 100%; height: 100%; direction: ltr; overflow: scroll hidden;"
>

and I don't know what showshorizontalscrollindicator="false" is - maybe that's related, maybe not. This needs diagnosis.

Comment 3

[Emilio Cobos Álvarez [:emilio]]

Dennis, I see:

.rax-scrollview::-webkit-scrollbar {
    display: none;
}

In the chrome inspector when debugging this. We could suggest them to fix it (or intervene) with:

.rax-scrollview { scrollbar-width: none }

We could also make this work somehow, with some effort, if we come across this ::-webkit-scrollbar { display: none } case commonly enough.

Comment 4

[Emilio Cobos Álvarez [:emilio]]

https://github.com/search?q=repo%3Araxjs%2Frax-components%20webkit-scrollbar&type=code

Comment 5

[Emilio Cobos Álvarez [:emilio]]

Attachment: GitHub Pull Request for rax-components

Comment 6

[Dennis Schubert [:denschub]]

Ah - looks like my quick check during triage was wrong, then. Cool. I'll remove this from the diagnosis queue, but let's ship an intervention. :)

Comment 8

[Thomas Wisniewski [:twisniewski]]

The layout is a bit different now, and this is the CSS rule causing the issue:

.aec-scrollview::-webkit-scrollbar {
    display: none;
}

So we can still ship an appropriate intervention here.

Comment 9

[Thomas Wisniewski [:twisniewski]]

Attachment: Bug 1926506 - add a CSS intervention for aliexpress.com to hide extra scrollbars; r?denschub

Comment 10

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/d25ce5b83b2c
add a CSS intervention for aliexpress.com to hide extra scrollbars; r=denschub,webcompat-reviewers

Comment 11

[Atila Butkovits]

Backed out for causing failures at browser_interventions.js.

Backout link: https://hg.mozilla.org/integration/autoland/rev/a5f31fde35ddbb02b23fc5aef0f9d4df2bd6214b

Push with failures: https://treeherder.mozilla.org/jobs?repo=autoland&resultStatus=testfailed%2Cbusted%2Cexception%2Cretry%2Cusercancel&revision=a821d37825967d3279c2a9e11d3d3ffecd757f7e&selectedTaskRun=LhyobKVkSDaYzxex9PeOBg.0

Failure log: https://treeherder.mozilla.org/logviewer?job_id=496740708&repo=autoland&lineNumber=11514

Comment 12

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/d42566afb5f0
add a CSS intervention for aliexpress.com to hide extra scrollbars; r=denschub,webcompat-reviewers

Comment 13

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/2940bafdcd97
add a CSS intervention for aliexpress.com to hide extra scrollbars; r=denschub,webcompat-reviewers

Comment 14

[Serban Stanca [:SerbanS]]

https://hg.mozilla.org/mozilla-central/rev/2940bafdcd97

Comment 15

[Thomas Wisniewski [:twisniewski]]

We can remove our intervention here, as the layout has changed and while I see them using webkit-scrollbar in one CSS style, they are also using scrollbar-width:none in a similar one, so I think we're safe.

Comment 16

[Thomas Wisniewski [:twisniewski]]

The intervention was removed in bug 1945830.