1818953 - Dropdown not working

Status: RESOLVED INVALID

(Web Compatibility :: Site Reports, defect)

Description

[dzulic123]

User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/110.0.0.0 Safari/537.36

Steps to reproduce:

On web page https://viptransferi.hr/ select is not working on Android browser even though on PC and iOS is working.

Actual results:

On the home page I pressed the select tag and nothing happens, only sometimes in rare cases it opens.

Expected results:

Select should open with lists of options.

Comment 1

[BugBot [:suhaib / :marco/ :calixte]]

The severity field is not set for this bug.
:cpeterson, could you have a look please?

For more information, please visit auto_nag documentation.

Comment 2

[Makoto Kato [:m_kato]]

If using mouse, this dropdown box works well. I guess that it depends on click event or mouse event.

Comment 3

[dzulic123]

(In reply to Makoto Kato [:m_kato] from comment #2)

If using mouse, this dropdown box works well. I guess that it depends on click event or mouse event.

Yes, that's right, as I wrote before, the dropdown box works on all browsers on Android, except Firefox.

Comment 4

[Makoto Kato [:m_kato]]

It might be bug of https://github.com/ftlabs/fastclick/.

https://github.com/ftlabs/fastclick/blob/main/lib/fastclick.js#L602

		// Prevent the actual click from going though - unless the target node is marked as requiring
		// real clicks or if it is in the allowlist in which case only non-programmatic clicks are permitted.
		if (!this.needsClick(targetElement)) {
			event.preventDefault();
			this.sendClick(targetElement, event);
		}

So we don't open choice prompt. This logic doesn't run on Firefox desktop with touch event. And If changing UA with Safari/iOS, we open choice prompt and works expected.

But fastclick is unmaintained library now...

Comment 5

[Makoto Kato [:m_kato]]

(If you are site owner, It can reosve by adding class="needsclick" in <select> element)

Comment 6

[Makoto Kato [:m_kato]]

This content is unnecessary for 300ms touch -> mouse event delay.

But this logic doesn't work if device's devicePixelRatio isn't 2.

	FastClick.notNeeded = function(layer) {
...
		if (firefoxVersion >= 27) {
			// Firefox 27+ does not have tap delay if the content is not zoomable - https://bugzilla.mozilla.org/show_bug.cgi?id=922896

			metaViewport = document.querySelector('meta[name=viewport]');
			if (metaViewport && (metaViewport.content.indexOf('user-scalable=no') !== -1 || document.documentElement.scrollWidth <= window.outerWidth)) {
				return true;
			}
		}

So If bug 1657380 is fixed, this issue will be able to be resolved.

Comment 7

[Makoto Kato [:m_kato]]

This seems to be Web compat issue. https://viptransferi.hr/ uses fastclick library (https://github.com/ftlabs/fastclick/) that is unmaintained.

Although fastclick tries to detect whether browser has 300ms touch delay in FastClick.notNeeded, this logic doesn't work on Firefox Android (document.documentElement.scrollWidth <= window.outerWidth doesn't work for detecting 300ms touch delay). I think that modern browsers doesn't requires this detections, this site should remove to use fastclick.

Comment 8

[Makoto Kato [:m_kato]]

Firefox has rounding issue (see https://bugzilla.mozilla.org/show_bug.cgi?id=1657380#c1), document.documentElement.scrollWidth and window.outerWidth may not be same on many android devices even if content isn't zoomed.

Comment 9

[Calin Tanase]

Verified the link on Windows and Android and the website doesn't seem to be available anymore. (regardless of the browser)

Closing this as invalid.