biobloom.at - Page is not scrollable

[webcompat-bot]

URL: https://biobloom.at/shop/into-the-wild-bio-bodylotion-150ml/

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

Problem type: Site is not usable Description: Barely able to scroll, feels "stuck" Steps to Reproduce:

Browser Configuration

• None

From webcompat.com with ❤️

[softvision-sergiulogigan]

Thanks for the report! I'm able to reproduce the issue. Scrolling is not possible when starting from a product photo.

Tested with: Browser / Version: Firefox Preview Nightly 191109 (🦎: 72.0a1-20191105095755) Operating System: Samsung Galaxy S8 (Android 9) - 1440 x 2960 pixels, 18.5:9 ratio (~570 ppi density)

Moving to Needsdiagnosis.

[softvision-sergiulogigan]

[karlcow]

I get a 404 on chrome and firefox. Because I'm automatically redirected to the Japanese version of the website which doesn't have this page. I can't diagnose. It will have to be @ksy36 or @miketaylr

[ksy36]

So this is happening because ontouch start event propagation is stopped if the target is an image in this file:

document.addEventListener("touchstart",kpg_nrci_cm, false);
...
try {
    if (event.target.tagName == "IMG") {
        //alert("in IMG");
        event.cancelBubble = true;
        if(event.preventDefault != undefined) {
            event.preventDefault();
        }
        if(event.stopPropagation != undefined) {
            event.stopPropagation();
        }
        //console.log('in img tag');
        return false;
    } 
} catch(error) {
    console.log("NRI error:"+error);
}

They're using jquery.nicescroll 3.2.0 and expect the above touchstart event here to perform custom scrolling :

b.ontouchstart = function(d) {
                            if (d.pointerType && 2 != d.pointerType)
                                return !1;
                            if (!b.locked) {
                                if (f.hasmstouch)
                                    for (var c = d.target ? d.target : !1; c; ) {
                                        var g = e(c).getNiceScroll();
                                        if (0 < g.length && g[0].me == b.me)
                                            break;
                                        if (0 < g.length)
                                            return !1;
                                        if ("DIV" == c.nodeName && c.id == b.id)
                                            break;
                                        c = c.parentNode ? c.parentNode : !1
                                    }
                                b.cancelScroll();
                                if ((c = b.getTarget(d)) && /INPUT/i.test(c.nodeName) && /range/i.test(c.type))
                                    return b.stopPropagation(d);
                                !("clientX"in d) && "changedTouches"in d && (d.clientX = d.changedTouches[0].clientX,
                                d.clientY = d.changedTouches[0].clientY);
                                b.forcescreen && (g = d,
                                d = {
                                    original: d.original ? d.original : d
                                },
                                d.clientX = g.screenX,
                                d.clientY = g.screenY);
                                b.rail.drag = {
                                    x: d.clientX,
                                    y: d.clientY,
                                    sx: b.scroll.x,
                                    sy: b.scroll.y,
                                    st: b.getScrollTop(),
                                    sl: b.getScrollLeft(),
                                    pt: 2,
                                    dl: !1
                                };
                                if (b.ispage || !b.opt.directionlockdeadzone)
                                    b.rail.drag.dl = "f";
                                else {
                                    var g = e(window).width()
                                      , p = e(window).height()
                                      , h = Math.max(document.body.scrollWidth, document.documentElement.scrollWidth)
                                      , l = Math.max(document.body.scrollHeight, document.documentElement.scrollHeight)
                                      , p = Math.max(0, l - p)
                                      , g = Math.max(0, h - g);
                                    b.rail.drag.ck = !b.rail.scrollable && b.railh.scrollable ? 0 < p ? "v" : !1 : b.rail.scrollable && !b.railh.scrollable ? 0 < g ? "h" : !1 : !1;
                                    b.rail.drag.ck || (b.rail.drag.dl = "f")
                                }
                                b.opt.touchbehavior && (b.isiframe && f.isie) && (g = b.win.position(),
                                b.rail.drag.x += g.left,
                                b.rail.drag.y += g.top);
                                b.hasmoving = !1;
                                b.lastmouseup = !1;
                                b.scrollmom.reset(d.clientX, d.clientY);
                                if (!f.cantouch && !this.istouchcapable && !f.hasmstouch) {
                                    if (!c || !/INPUT|SELECT|TEXTAREA/i.test(c.nodeName))
                                        return !b.ispage && f.hasmousecapture && c.setCapture(),
                                        b.cancelEvent(d);
                                    /SUBMIT|CANCEL|BUTTON/i.test(e(c).attr("type")) && (pc = {
                                        tg: c,
                                        click: !1
                                    },
                                    b.preventclick = pc)
                                }
                            }
                        }

Since bubbling is cancelled, scrolling is not happening. This doesn't happen in Chrome since custom scrolling is not enabled there because of this condition:

        f.cantouch && (f.ischrome && !f.isios && !f.isandroid) && (this.istouchcapable = !0,
        f.cantouch = !1);
        f.cantouch && (f.ismozilla && !f.isios) && (this.istouchcapable = !0,
        f.cantouch = !1);

The site could add !f.isandroid to (f.ismozilla && !f.isios) condition to disable custom scrolling for Firefox on Android as well

[karlcow]

issues mentioning jquery nicescroll https://github.com/webcompat/web-bugs/issues?utf8=%E2%9C%93&q=is%3Aissue+nicescroll

[karlcow]

There is #7388 with links associated to this issue. The most recent version of nicescroll is https://github.com/inuyaksa/jquery.nicescroll/tree/3.7.6 3.2 is older than 2014.

[softvision-oana-arbuzov]

The issue has been fixed. The scrolling is working fine now.

Tested with: Browser / Version: Firefox Nightly 200817 (🦎 81.0a1-20200812034418) Operating System: Huawei P20 Lite (Android 8.0.0) - 1080 x 2280 pixels, 19:9 ratio (~432 ppi density), Samsung Galaxy S6 Edge (Android 7.0) - 1440 x 2560 pixels (~577 ppi pixel density)