www.themusiclab.org - Drop-down button is not working properly

[andygoth]

URL: https://www.themusiclab.org/quizzes/miq

Browser / Version: Firefox Mobile 75.0 Operating System: Android Tested Another Browser: No

Problem type: Something else Description: Largely unresponsive drop-down pick list buttons Steps to Reproduce: I have to tap the drop-down pick list buttons many times before the menu appears

Browser Configuration

• None

From webcompat.com with ❤️

[cipriansv]

Thanks for the report, @andygoth.

I was indeed able to reproduce the issue. The drop-down menu list is displayed only after several attempts.

Tested with: Browser / Version: Firefox Nightly Preview 200305 (🦎: 75.0a1-20200304084140), Chrome Mobile 80.0.3987.132 Operating System: Huawei P10 (Android 9.0) - 1080 x 1920 pixels (~432 ppi pixel density)

This is the web page displayed in Firefox Preview Nightly after the first attempt:

And this is the web page displayed in Chrome:

Moving the issue to needsdiagnosis.

[denschub]

This isn't an issue with select fields in general, and it's not an issue with the site's CSS. There are multiple handlers firing when hitting a select field, some of which cancel the event, some of which cancel the propagation. There likely is a hidden race condition in that code, but debugging that while looking at all incoming issues takes too much bandwidth. This is something to revisit.

[karlcow]

13:53:12.194
focus { target: Window, isTrusted: true, view: Window, detail: 0, layerX: 0, layerY: 0, which: 0, rangeOffset: 0, SCROLL_PAGE_UP: -32768, SCROLL_PAGE_DOWN: 32768, … }
helpers.ts:68:8
13:53:16.693
click { target: select
, buttons: 0, clientX: 162, clientY: 239, layerX: 162, layerY: 239 }
helpers.ts:68:8
13:53:16.698
click { target: select
, buttons: 0, clientX: 162, clientY: 239, layerX: 162, layerY: 239 }
helpers.ts:217:6
13:53:16.702 trycatch.ts:32:22
13:53:16.703
click { target: select
, buttons: 0, clientX: 162, clientY: 239, layerX: 162, layerY: 239 }
helpers.ts:68:8
13:53:16.706
click { target: select
, buttons: 0, clientX: 162, clientY: 239, layerX: 162, layerY: 239 }
helpers.ts:68:8
13:53:16.712 undefined helpers.ts:68:8

Sequence of events on rdm where this is working. Let's try on the device.

13:55:54.430
touchstart { target: select
, isTrusted: true, touches: TouchList, targetTouches: TouchList, changedTouches: TouchList, altKey: false, metaKey: false, ctrlKey: false, shiftKey: false, view: Window, … }
helpers.ts:68:8
13:55:54.493
touchend { target: select
, isTrusted: true, touches: TouchList, targetTouches: TouchList, changedTouches: TouchList, altKey: false, metaKey: false, ctrlKey: false, shiftKey: false, view: Window, … }
helpers.ts:68:8
13:55:54.498
mousedown { target: select
, buttons: 0, clientX: 163, clientY: 266, layerX: 0, layerY: 0 }
helpers.ts:68:8
13:56:00.823 undefined helpers.ts:68:8

This almost looks like a kind of fastClick.

return this.trackingClick = !0,
this.trackingClickStart = e.timeStamp,
this.targetElement = t,
this.touchStartX = n.pageX,
this.touchStartY = n.pageY,
e.timeStamp - this.lastClickTime < this.tapDelay && e.preventDefault(),
!0
},

ahaha ok.

     * @preserve FastClick: polyfill to remove click delays on browsers with touch UIs.
     *
     * @codingstandard ftlabs-jsv2
     * @copyright The Financial Times Limited [All Rights Reserved]
     * @license MIT License (see LICENSE.txt)
     */
    function o(e, t) {
      var n;
      if (t = t || {
      }, this.trackingClick = !1, this.trackingClickStart = 0, this.targetElement = null, this.touchStartX = 0, this.touchStartY = 0, this.lastTouchIdentifier = 0, this.touchBoundary = t.touchBoundary || 10, this.layer = e, this.tapDelay = t.tapDelay || 200, this.tapTimeout = t.tapTimeout || 700, !o.notNeeded(e)) {

[karlcow]

The current page is not working on Firefox Mobile Android because of the FastClick library. They just need to remove it.

See https://miketaylr.com/posts/2017/10/fast-click-more-like-thing-of-the-past-click.html

[softvision-oana-arbuzov]

The issue has been fixed. The drop-down menu is displayed on first tap.

Tested with: Browser / Version: Firefox Nightly 200804 (🦎 81.0a1-20200802093514) Operating System: Huawei P20 Lite (Android 8.0.0) - 1080 x 2280 pixels, 19:9 ratio (~432 ppi density), Samsung Galaxy S6 Edge (Android 7.0) - 1440 x 2560 pixels (~577 ppi pixel density)

[softvision-raul-bucata]

The issue is still reproducible on the latest build of Firefox Nightly, and Release:

Tested with:

Browser / Version: Firefox Release 99.2.0 (2015874211-🦎99.0.1-20220411174855 )/ Firefox Nightly 101.0a1 (2015877195 -🦎101.0a1-20220427094429🦎)/ Chrome Mobile Version 100.0.4896.127 Operating System: Samsung A51 (Android 11) -1080 × 2400 pixels 20:9 aspect ratio (~405 ppi density) Operating System: Google Pixel 3 (Android 12) -1080 x 2160 pixels, 18:9 ratio (~443 ppi density)

Notes:

1. Reproducible regardless of the status of ETP.
2. Reproducible on the latest build of Firefox Nightly.
3. Works as expected using Chrome.

Reopening the issue for further investigations.

[inv_17/2022]

[ksy36]

Let's see if this is possible to address by https://bugzilla.mozilla.org/show_bug.cgi?id=1448747