Web-bugs: www.nb.no - mobile site is not usable

Created on 13 Jul 2016 · 15Comments · Source: webcompat/web-bugs

URL: http://www.nb.no/nbsok/search?mediatype=b%C3%B8ker
Browser / Version: Firefox 48.0b1
Operating System: Android
Problem type: Mobile site is not usable

Steps to Reproduce
1) Navigate to: http://www.nb.no/nbsok/search?mediatype=b%C3%B8ker
2) Tap any listed book

Expected Behavior:
The link should open a page where the book can be read.

Actual Behavior:
Nothing happens

_From webcompat.com with ❤️_

browser-chrome-mobile browser-firefox-mobile engine-gecko

Source

hallvors

Most helpful comment

Hey there! Sorry for getting back to this so late.

I'll see what I can find. I got the android emulator set up now (I think), and if I need to, I can probably find and charge up my Nexus 5X that I used to use for personal compat testing, which got lost somewhere in my house.

I'll actively try to find a bit of time to dig this weekend, but probably can't look before that. :(

brianarn on 21 Oct 2016

👍2

All 15 comments

Thanks @hallvors

There is a bit of detection which populates the html with class

<html class="dj_gecko dj_android dj_ff50 dj_contentbox  dj_android dj_portrait dj_phone mobile">

btw, another site which puts the properties in the wrong order:

in main.css

* {
    margin: 0; padding: 0;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
}

And indeed, the touch is not working (on Android device), while click is working (desktop faking mobile UA).

Switching to needsdiagnosis

karlcow on 14 Jul 2016

This site uses dojo and somewhere within the depths of the library, the touch events stop propagating to a point where the actual click on the link is no longer executed. Need to dig into that more.

denschub on 20 Oct 2016

Okay, I feel stuck.

@brianarn, @miketaylr told me you'd love to help us out if we ever have a web compatibility issue with Dojo, so here we are. The site is using Dojo 1.10.4, and for some reason you cannot click on the linked book titles to get to a detail page on Firefox for Android, but it works on Chrome Mobile.

There is no event handler defined on that link at all, the closest event handlers are dojotouch[end|out|over] and touchstart on the body tag. Those handlers get triggered when I tap the link, but the browser apparently never receives a click event for the link. In general, Firefox for Android sends virtual click events on touchend as specified, unless the touchend calls preventsDefault, stopPropagation or sets defaultPrevented. After a quick debugging, I was not able to find anything related in the registered handlers, but debugging inside a framework like Dojo is always a bit of a pain.

Could you help us out? Any hints on how we could find the solution to that would be greatly appreciated. Thanks!

denschub on 20 Oct 2016

Hey there! Sorry for getting back to this so late.

I'll actively try to find a bit of time to dig this weekend, but probably can't look before that. :(

brianarn on 21 Oct 2016

👍2

Sure, no hurry. Any help is appreciated! Ping me if you need any help in setting stuff up.

denschub on 21 Oct 2016

@brianarn anything new? If you're not able to work on that, just let me know and we'll have another shot. :)

denschub on 8 Nov 2016

Whatever it is, even Chrome on my phone doesn't recognize most of the taps I make (only sometimes when I tap on a title does it begin to load a book).

wisniewskit on 8 Nov 2016

I'm really sorry y'all. Have had trouble tracking down my physical Android device, and also just been relatively short of time to spare for things. :(

brianarn on 10 Nov 2016

No worries! Thanks much for responding, though. We'll continue this debugging on our own, but if you're happy, I'll get back to you if we have another Dojo issue in the future! :)

denschub on 10 Nov 2016

may be due to web error

kavyakumaravel on 28 Dec 2016

It turns out that the problem is that the site doesn't do anything special (from what I can tell) with the title links, it just expects them to work like regular links. However, Dojo's touch.js is set up to cancel all click events on a tags by calling preventDefault on them. It does fire its own HTMLEvent click events later as proxies, but that doesn't help - the default action of clicking them won't happen that way. This should be true in all modern browsers, which explains why the links aren't working for me in Chrome as well.

I'm not sure what the "correct" fix is for Dojo, but in the method causing this they already special-case certain input tags, and don't call preventDefault on their click events. The method is stopNativeEvents in touch.js (link to unminified version 1.11.3):

function stopNativeEvents(type){
    win.doc.addEventListener(type, function(e){
        // Stop native events when we emitted our own click event.  Note that the native click may occur
        // on a different node than the synthetic click event was generated on.  For example,
        // click on a menu item, causing the menu to disappear, and then (~300ms later) the browser
        // sends a click event to the node that was *underneath* the menu.  So stop all native events
        // sent shortly after ours, similar to what is done in dualEvent.
        // The INPUT.dijitOffScreen test is for offscreen inputs used in dijit/form/Button, on which
        // we call click() explicitly, we don't want to stop this event.
        var target = e.target;
        if(clickTracker && !e._dojo_click &&
                (new Date()).getTime() <= clickTime + 1000 &&
                !(target.tagName == "INPUT" && domClass.contains(target, "dijitOffScreen"))){
            e.stopPropagation();
            e.stopImmediatePropagation && e.stopImmediatePropagation();
            if(type == "click" &&
                (target.tagName != "INPUT" ||
                (target.type == "radio" &&
                    // #18352 Do not preventDefault for radios that are not dijit or
                    // dojox/mobile widgets.
                    // (The CSS class dijitCheckBoxInput holds for both checkboxes and radio buttons.)
                    (domClass.contains(target, "dijitCheckBoxInput") ||
                        domClass.contains(target, "mblRadioButton"))) ||
                (target.type == "checkbox" &&
                    // #18352 Do not preventDefault for checkboxes that are not dijit or
                    // dojox/mobile widgets.
                    (domClass.contains(target, "dijitCheckBoxInput") ||
                        domClass.contains(target, "mblCheckBox")))) &&
                target.tagName != "TEXTAREA" && target.tagName != "AUDIO" && target.tagName != "VIDEO"){
                // preventDefault() breaks textual <input>s on android, keyboard doesn't popup,
                // but it is still needed for checkboxes and radio buttons, otherwise in some cases
                // the checked state becomes inconsistent with the widget's state
                e.preventDefault();
            }
        }
    }, true);
}

If I change the innermost if-statement to add a bypass so a tags aren't preventDefaulted, then tapping on the links works (on mobiles and in the touch-emulation mode for the Responsive Design Mode on desktop Firefox). But it might be better for Dojo to try to calling the link's click() methods later on in the click events they fire later, so I'm unsure.

As for this specific site, they're using a local copy of Dojo 1.10.4, so they could hack their copy of touch.js to use the simple work-around that I've confirmed does the trick... but I don't know if they rely on this behavior on some link tags, but not on these specific ones, so it might not be a suitable fix. In case it sounds reasonable to them, they can just change the first line of this code-block in their minified copy of touch.js:

if(_30=="click"&&(e.target.tagName!="INPUT"||e.target.type=="radio"||e.target.type=="checkbox")&&e.target.tagName!="TEXTAREA"&&e.target.tagName!="AUDIO"&&e.target.tagName!="VIDEO"){
e.preventDefault();
}

To this:

if(_30=="click"&&(e.target.tagName!="A"&&(e.target.tagName!="INPUT"||e.target.type=="radio"||e.target.type=="checkbox")&&e.target.tagName!="TEXTAREA"&&e.target.tagName!="AUDIO"&&e.target.tagName!="VIDEO")){

I've confirmed that it does the trick locally, on my phone in Firefox and in Chrome (and in Responsive Design Mode's touch emulation mode on desktop Firefox).

wisniewskit on 19 Jan 2017

Maybe @hallvors wouldn't mind trying to contact the site? :)

adamopenweb on 2 Feb 2017

Certainly :)

hallvors on 4 Feb 2017

I have contacted somebody I know who works at the national library, she has passed it on to the right department.

hallvors on 8 Feb 2017

❤1

After retesting the issue I confirm that the issue has been fixed.

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