mobile.aireuropa.com - The "MENU" button is not working

[eyalyoli]

URL: https://mobile.aireuropa.com/h5/mobile/en/register

Browser / Version: Firefox Mobile 68.0
Operating System: Android 8.0.0
Tested Another Browser: Yes

Problem type: Site is not usable
Description: Side menu button doesn't work & form submit button doesn't work
Steps to Reproduce:
When you click on menu button on upper left, it should open a side menu. When you fill the form on the page it should move on with the subscription but instead it jumps up and doesn't say anything.

Browser Configuration

• None

From webcompat.com with ❤️

[mozilianulb]

Thanks for the report @eyalyoli , I am able to reproduce this issue. When tapping on "Menu" button nothing happens.

Browser / Version: Firefox Nightly 68.1a1 (2019-07-09)
Operating System: OnePlus 2 (Android 6.0.1) - 1080 x 1920 pixels, 16:9 ratio (~401 ppi density)

[ksy36]

Regarding the form submission, it works for me and I was able to subscribe.

As for the menu, this event listener is attached to it:

       /**
       * Setup live binds for show/hide actions on marked elements
       */
            $(document).on('click', '.translate3d.hasFixed .menuize_show-left, .translate3d.hasFixed .menuize_show-right', function(e) {
                e.preventDefault();

                if (!status.current) {
                    var that = $(this);
                    var panelId = that.hasClass('menuize_show-left') ? 'left' : 'right';

                    show(panelId);
                } else {
                    hidePanel();
                }

            });

So it looks for an element with a class .translate3d.hasFixed .menuize_show-left.
In case of Firefox for Android hasFixed is missing because of the UA detection.
It starts here:

hasFixed: device.hasPositionFixed || device.isIE11 || device.isDesktop,

Then the actual detection is happening here:

hasPositionFixed: window.Worker && f || m || v || w || x || k || D,

, a = navigator.userAgent
      , s = /Web[kK]it[\/]{0,1}([\d.]+)/.test(a)
      , c = /(iPhone\sOS)\s([\d_]+)/.test(a)
      , l = /(iPod)(.*OS\s([\d_]+))?/.test(a)
      , u = /(iPad).*OS\s([\d_]+)/.test(a)
      , f = c || l || u
      , d = !!a.match(/\(Macintosh\; Intel /)
      , h = /(Android);?[\s\/]+([\d.]+)?/.test(a)
      , p = /android 2./gi.test(a)
      , m = /android 3./gi.test(a)
      , v = /android 4./gi.test(a)
      , g = /Android /.test(r) && !/Chrome\/\d/.test(r)
      , y = /(BlackBerry).*Version\/([\d.]+)/.test(a)
      , b = y && /version\/6/gi.test(a)
      , w = y && /version\/7/gi.test(a)
      , x = /(BB10).*Version\/([\d.]+)/.test(a)
      , T = /MSIE\s([\d.]+)/.test(a) || /Trident\/[\d](?=[^\?]+).*rv:([0-9.].)/.test(a)
      , E = /MSIE 9/gi.test(a)
      , k = /MSIE 10/gi.test(a)
      , S = /Trident\/[\d](?=[^\?]+).*rv:([0-9.].)/.test(a)
      , D = /Chrome\/([\d.]+)/.test(a) || /CriOS\/([\d.]+)/.test(a)
      , P = /Firefox\/([\d.]+)/.test(a)
      , C = /\((?:Mobile|Tablet); rv:([\d.]+)\).*Firefox\/[\d.]+/.test(a)

So User Agent detection should be changed in order to for the menu to work (it accounts only for android version 4).

[ksy36]

Considering the above code, when I spoof as Chrome, the menu opens up. The menu icon is shifted to the left though, and when I click on it, the elements inside the flyout panel look different. I'll investigate this further.

[ksy36]

So the menu is shifted to the left:

is caused by this

.main-header-inner .main-menu-button{
     width: 60px;
      ....
}

.main-header-inner a {

    display: table-cell;
    height: 50px;
    width: 42px;
    max-width: 42px;
    text-decoration: none;
    text-align: center;
    vertical-align: middle;
    color: #FFFFFF;
    background-position: center;
    background-repeat: no-repeat;
}

Adding max-width: 60px; to the first rule fixes the issue for me.

[ksy36]

The flyout panel looks like this:

And the code:

.links-list.with-icons li > a {
	display: table;
	min-height: 50px;
	padding: 0px;
}

Adding height: 50px; fixes the issue:

I guess it's related to https://bugzilla.mozilla.org/show_bug.cgi?id=307866 , but lets contact the site to see if they could fix this

[adamopenweb]

Contacted via LinkedIn.

[ksy36]

Reached out via contact form as well and got identification number WEB051623

[ksy36]

Created https://bugzilla.mozilla.org/show_bug.cgi?id=1571036

[cipriansv]

After retesting the issue I confirm that the issue has been fixed. Tapping on the "MENU" button displayed the flyout panel containing the menu items.

Tested with:
Browser / Version: Firefox Nightly 68.1a1 (2019-08-27), Firefox Preview 1.3.1 (Build #12341950)
Operating System: Huawei P10 (Android 8.0) - 1080 x 1920 pixels (~432 ppi pixel density)

[lock]

This issue has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue at https://webcompat.com/issues/new if you are experiencing a similar problem.