1452396 - no reaction on menu items and links at pica-marker.com

Status: RESOLVED INVALID

(Firefox for Android Graveyard :: General, defect, P1)

Description

[Knut krueger]

User Agent: Mozilla/5.0 (X11; Linux x86_64; rv:59.0) Gecko/20100101 Firefox/59.0
Build ID: 20180323154952

Steps to reproduce:

happens on Nvidia shield tablet (with newest  updates)  and other  android smartphones
go to http://pica-marker.com/ try in desktop mode and mobile mode to use links and menu item. 

no  any menu or link



Actual results:

nothing


Expected results:

Chrome for Android is working fine
see firefox on desktop pc is working fine
workin on  PC with Debian Stretch - and Windows 10

Comment 1

[Sorina Florean [:sflorean]]

Thanks for report!
I was able to reproduce this issue with Google Pixel(Android 8.1.0) on all branches. Marking as NEW.

Comment 2

[Michael Comella (:mcomella) [NI reported issues only: ex-Mozilla]]

[triage] Potentially critical: this only affects one site but iiuc we're failing to open links and that's an awful issue.

Comment 3

[:sdaswani]

Will fix for 61.

Comment 4

[Knut krueger]

another page:
http://legionaere.de
goto [Teams] -> [Weitere Teams]

The teams in the Pulldownmenu are not usable in Firefox Mobile but in Chrome Mobile and Desktop Version of Firefox

Comment 5

[Andrei Lazar]

(In reply to Knut krueger from comment #0)
> User Agent: Mozilla/5.0 (X11; Linux x86_64; rv:59.0) Gecko/20100101
> Firefox/59.0
> Build ID: 20180323154952
> 
> Steps to reproduce:
> 
> happens on Nvidia shield tablet (with newest  updates)  and other  android
> smartphones
> go to http://pica-marker.com/ try in desktop mode and mobile mode to use
> links and menu item. 
> 
> no  any menu or link
> 
> 
> 
> Actual results:
> 
> nothing
> 
> 
> Expected results:
> 
> Chrome for Android is working fine
> see firefox on desktop pc is working fine
> workin on  PC with Debian Stretch - and Windows 10

So as far as I understand we can reduce everything to 2 possible issues:
1) Clicking on the inside of the menu button, on the solid color is not redirecting.
2) Clicking on the text of the menu button is not redirecting.

Regarding 1), the issue is actually just a problem with the way this menu was implemented. I'm saying this because I inspected their code and the menu is just an unordered list (</ul>) with some list items (</li>) with an anchor tag inside (</a>). That means this is not an actual "button", just a list of anchors designed to look like a button, so there is no way to actually work without clicking on the text.

<ul class="menu sf-js-enabled sf-shadow">
<li class="first leaf"><a href="/en/products">Products</a></li>
<li class="leaf"><a href="/en/company">Company</a></li>
<li class="last leaf"><a href="/en/contact">Contact</a></li>
</ul>

Regarding 2), I have tested and tried to reproduce the issue on the latest version of dev and nightly but with no success. I also asked Sorina from QA to verify this as well and achieved the same result. It seems to have been fixed in another patch.

Comment 6

[Sorina Florean [:sflorean]]

(In reply to Andrei Lazar from comment #5)
> 
> So as far as I understand we can reduce everything to 2 possible issues:
> 1) Clicking on the inside of the menu button, on the solid color is not
> redirecting.
> 2) Clicking on the text of the menu button is not redirecting.
> 
> Regarding 1), the issue is actually just a problem with the way this menu
> was implemented. I'm saying this because I inspected their code and the menu
> is just an unordered list (</ul>) with some list items (</li>) with an
> anchor tag inside (</a>). That means this is not an actual "button", just a
> list of anchors designed to look like a button, so there is no way to
> actually work without clicking on the text.
> 
> <ul class="menu sf-js-enabled sf-shadow">
> <li class="first leaf"><a href="/en/products">Products</a></li>
> <li class="leaf"><a href="/en/company">Company</a></li>
> <li class="last leaf"><a href="/en/contact">Contact</a></li>
> </ul>
> 
> Regarding 2), I have tested and tried to reproduce the issue on the latest
> version of dev and nightly but with no success. I also asked Sorina from QA
> to verify this as well and achieved the same result. It seems to have been
> fixed in another patch.

Tested with Motorola nexus 6 (Android 7.1.1) and indeed the issue is not reproducible on latest Nightly. Tapping on text "Products" opens the page Products.

Knut krueger could you plase install latest Nightly build and try again? You can download from Google Play  (https://play.google.com/store/apps/details?id=org.mozilla.fennec_aurora) or from here: http://archive.mozilla.org/pub/mobile/nightly/2018/04/. Thank you!

Comment 7

[Knut krueger]

Confirm: Working on pica-marker.com
but not on 
legionaere.de
https://bugzilla.mozilla.org/show_bug.cgi?id=1452396#c4

Kind Regards Knut

Comment 8

[Andrei Lazar]

Again, this is just a problem of implementation (to be more specific, this website is not responsive at all). 
On hovering the menu (desktop version) a drop down list will appear, but the same behavior is on mobile, the only difference is that you don't actually have a hover state on mobile, it's either touch or not at all.
After further investigations on this website (legionaere.de) I discovered:

#sub_navi ul li.item a.item_link {
    display: block;
    text-decoration: none;
    font-size: 16px;
    padding: 6px 20px 0 20px;
        padding-right: 20px;
        padding-left: 20px;
    float: left;
    height: 30px;
    text-shadow: #000 0px -1px 0px;

}
#sub_navi ul .item > a {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 140px;
    margin-right: 5px;

} 

which confirms my theory. I will also kindly ask Sorina to confirm this for me. Thanks!

Comment 9

[Sorina Florean [:sflorean]]

Hi all, tested again on latest Nightly build 62.0a1 on Chrome and Firefox for Android and the behavior is the same on both browsers. The teams in the Pulldownmenu are not responsive and I confirm what Andrei said in comment 8. 
I will close this a s INVALID since is a site implementation.