1565623 - Scrolling is very slow on Android device on a site with typekit fonts

Status: RESOLVED INVALID

(Core :: Performance: General, defect)

Description

[Ksenia Berezina [:ksenia] on leave until 09/15]

As reported here:

https://github.com/webcompat/web-bugs/issues/35163

Steps to reproduce:

On Android device:
Go to https://www.corsair.com/us/en/Categories/Products/Cases/Mid-Tower-ATX-Cases/Obsidian-Series%E2%84%A2-550D-Mid-Tower-Quiet-Case/p/CC-9011015-WW and try to scroll the page

Expected:
Pages scrolls

Actual:
Page doesn't scroll

This is reproducible in Nightly and release Firefox and not in Chrome. The device I was testing with is Samsung S5.

Link to a performance profile

There is an expensive js function looping through each node on every scroll attempt:

      function ha(a) {
        a = document.createTreeWalker(a, NodeFilter.SHOW_ELEMENT, null, !1);
        var b = [
        ];
        do {
          var c = a.currentNode;
          if (c && 'SCRIPT' !== c.nodeName && 'STYLE' !== c.nodeName && 'NOSCRIPT' !== c.nodeName && 'TEMPLATE' !== c.nodeName && 'LINK' !== c.nodeName && 'TITLE' !== c.nodeName) {
            for (var d = c.childNodes, e = 0; e < d.length; e++) d[e].nodeType !== Node.TEXT_NODE || /^\s*$/.test(d[e].nodeValue) || b.push(d[e].nodeValue);
            'INPUT' === c.nodeName && 'hidden' !== c.type && 'password' !== c.type && b.push(c.value);
            'TEXTAREA' === c.nodeName && b.push(c.value)
          }
        } while (a.nextNode());
        a = b.join('');
        b = new m;
        for (c = 0; c < a.length; c++) d = a.charCodeAt(c),
        55296 === (d & 63488) && c < a.length ? (e = a.charCodeAt(c + 1), 56320 === (e & 64512) ? b.b.push(((d & 1023) << 10) + (e & 1023) + 65536)  : b.b.push(d), c++)  : b.b.push(d);
        return r(b)
      };

From this file https://use.typekit.net/psg2bgx.js

Comment 1

[Markus Stange [:mstange]]

Hmm, scrolling should be happening asynchronously using APZ and not be prevented by slow JavaScript. Maybe there's something else that inhibits scrolling? Is there a touch event listener that prevents async scrolling?

Comment 2

[Ksenia Berezina [:ksenia] on leave until 09/15]

Thanks for pointing that out. There is an ontouchmove event listener with preventDefault in it

document.ontouchmove = function (e) {
        e.preventDefault();
 }

In Chrome this event on document is being treated as passive, so calls to preventDefault are ignored and scrolling does work.
I guess I'll close this bug since it's not related to performance.