1900326 - pixabay.com - Filtering option buttons are broken

Status: VERIFIED DUPLICATE of bug 1903191

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

Description

[Raul Bucata]

Environment:
Operating system: Android 11
Firefox version: Firefox Mobile [phone]

Steps to reproduce:

1. Navigate to: https://pixabay.com/ro/videos/search/ufo/
2. Go to "Filters" and select any desired option
3. Tap on the option and observe

Expected Behavior:
The option is selected

Actual Behavior:
A dot is present

Notes:

• Reproduces regardless of the status of ETP
• Reproduces in Firefox Nightly, Firefox Release
• Does not reproduce in Chrome

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

Comment 1

[Raul Bucata]

Attachment: Screenshot_4.png

Comment 2

[Randell Jesup [:jesup] (needinfo me)]

Easily reproduced in responsive design mode on desktop. I'm not the right person to look into site JS.... @dholbert maybe?

Comment 3

[Daniel Holbert [:dholbert]]

Attachment: testcase 1 (partially reduced)

Comment 4

[Daniel Holbert [:dholbert]]

Attachment: testcase 2

Comment 5

[Daniel Holbert [:dholbert]]

Attachment: testcase 3

Comment 6

[Daniel Holbert [:dholbert]]

The page is placing an absolute-positioned input type="radio" element wayyyy off to the side in a scrollable container (with right:9999px), and they're giving it zero height and width, which Chrome honors but Firefox does not (we floor the size to 4px).

Since we've got it as having a nonzero size, it actually contributes to the scrollable overflow for us, which means we would generate scrollbars if this element were overflow:auto (in fact it's overflow:hidden, but we effectively generate logical/invisible scrollbars to let it be programmatically scrolled-to). And when it becomes checked, we scroll to show it -- it's the tiny dot that was mentioned in comment 0 actual-results).

In comparison: in Chrome, the zero-sized radio button is actually zero-sized and hence doesn't contribute scrollable overflow, and hence it can't be scrolled to when its label is clicked.

If I open Chrome devtools to force width:4px; height:4px on the radio button (to match Firefox's lower bound), then Chrome matches Firefox exactly on this site.

Comment 7

[Daniel Holbert [:dholbert]]

I filed bug 1903191 for the underlying platform difference here.

In the meantime, we could theoretically ship an intervention here. We could add appearance:none to their hidden-radio-button styles[1], which makes Firefox actually render the radio button as zero sized, which prevents the issue here and makes us behave just like Chrome here:

[1] specifically, we want to add appearance:none to this .hiddenInput--Rzalk rule:

.base--CeYsk > .input--b6Wi1 .hiddenInput--Rzalk {
  position: absolute;
  right: 9999px;
  width: 0;
  height: 0;

https://pixabay.com/static/frontend/client.ea46d9d65428317a1d14.css

Comment 8

[Emilio Cobos Álvarez (:emilio)]

Fixed by bug 1903191 I guess?

Comment 9

[Daniel Holbert [:dholbert]]

(In reply to Emilio Cobos Álvarez (:emilio) from comment #8)

Fixed by bug 1903191 I guess?

Yup, seems to be. I just retested and confirmed that the issue no longer reproduces. (For completeness: there is one minor glitch when you tap on a filter option [only the first time you tap any option, I think] where the filter category auto-closes instead of activating the option, but I recall that happening on Chrome as well.)

Thanks!