refresher.sk - menu fails to open because of non-standard event.toElement usage, rather than event.target

[webcompat-bot]

URL: http://refresher.sk/ Browser / Version: Firefox Mobile 50.0 Operating System: Android 6.0.1 Problem type: Unknown

Steps to Reproduce 1) Navigate to: http://refresher.sk/ 2) …

Expected Behavior:menu should work

Actual Behavior: not work

From webcompat.com with ❤️

[MDTsai]

Double click can show/hide menu

[tsl143]

Reproducible on Android 6.0.1/firefox 47

[miketaylr]

Yeah, seems like when you touch (or even just click from Desktop), it attempts to open, but immediately closes -- unless you double click.

[miketaylr]

Fairly certain this is due to them using the non-standard event.toElement, rather than just event.relatedTarget event.target:

t('html').click(function(e) {
        if (t(e.toElement).closest('#notifications').length === 0) {
            t('#notifications .dropdown').stop().slideUp(200);
            t('#notifications .triangle').stop().slideUp(200)
        }
        ;if (t(e.toElement).closest('#user-menu').length === 0) {
            t('#user-menu .dropdown').stop().slideUp(200);
            t('#user-menu .triangle').stop().slideUp(200)
        }
        ;if (t(e.toElement).closest('#panel-search').length === 0) {
            t('#panel-search .dropdown').stop().slideUp(200);
            t('#panel-search .triangle').stop().slideUp(200)
        }
        ;if (t(e.toElement).closest('#show-other').length === 0) {
            t('#show-other .items').stop().slideUp(200)
        }
    });
    t('#notifications, #user-menu, #panel-search').click(function(e) {
        if (t(e.toElement).closest(t(this).find('.dropdown')).length === 0) {
            t(this).find('.dropdown').stop().slideToggle(200);
            t(this).find('.triangle').stop().slideToggle(200)
        }
    });

Testing, because the double click thing is weird.

[miketaylr]

rather than just event.relatedTarget:

So, I forgot that relatedTarget is a property of MouseEvent. To fix this, they can just use plain ol' event.target:

[karlcow]

Also in the desktop version at the bottom right, the menu to change language.

adding -moz-appearance: none; to

footer select {
    width: 100%;
    color: #fff;
    font-family: 'Open Sans', sans-serif;
    font-size: 14px;
    border: solid #e1e1e1 2px;
    border-radius: 3px;
    height: 29px;
    padding: 0 30px 0 15px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    background: transparent;
    line-height: 1;
    border: 0;
    border-radius: 0;
    -webkit-appearance: none;
}

would solve it.

[karlcow]

They do not interact on twitter. https://twitter.com/refreshersk/with_replies

Maybe admin@refresher.sk The person who owns the company is Gabor Boros https://www.linkedin.com/in/gabor-boros-4772a54b https://twitter.com/gabwiny

Trying to contact him.

[karlcow]

Just contacted him http://twitter.com/MozWebCompat/status/760001264507719680

[softvision-sergiulogigan]

The layout of the page has changed. Also, seems like the issue has been fixed. The Menu is opened on first tap, and remains displayed. Tested on LG G5 running Android 7.0, and on Firefox 58.