1508529 - "Data Leeks" page scrolls jankily in Firefox, due to strange JS scroll listener that briefly sets "pointer-events:none" on root node

Status: RESOLVED FIXED

(Web Compatibility :: Site Reports, defect, P3)

Description

[Karl Dubost💡 :karlcow]

Navigating the site by scrolling on touch screen is laggy.

0. Firefox Android
1. Go to https://www.dataleeks.com/recipes/queso-dip
2. Try scrolling.

Note:
* slow scrolling is working without issues.
* Fast scrolling is failing at first attempt, but is working at second attempt.
* Trying to record a performance didn't give me anything sensitive.
* This is also happening on Firefox Desktop + RDM + touch + Firefox Android UA

I'll put a tentative qf flag, but I'm not sure. 

This is working well on Chrome.

Everything tested on Android 9 on a Pixel 2.

Comment 1

[Markus Stange [:mstange]]

Interacting with this page is wonky on macOS, too: scroll motions are often ignored.

This page sets pointer-events:none on the html element from a "scroll" event listener, and then unsets it again from a timeout.
It looks like Firefox ignores scrolling completely while pointer-events:none is set on the html element, whereas Chrome doesn't; Chrome scrolls normally.

I wonder what they're trying to achieve with this.

Comment 2

[Markus Stange [:mstange]]

Setting qf- because this is not a performance bug in Firefox; it's more of a webcompat or site issue.

Comment 3

[Markus Stange [:mstange]]

Daniel filed bug 1508789 on the difference between how Firefox and other browsers treat pointer-events:none on the root element.

Comment 4

[Daniel Holbert [:dholbert]]

Yeah -- let's use this bug to investigate why the site is bothering to set "pointer-events:none" on that root node in the first place, and hopefully getting them* to stop.  ("them" = us, I think? This dataleeks.com page is a Mozilla-authored site. :D  Though it's using some squarespace JS libraries under the hood, which might be the real issue here (not sure))

So, next action here is to get in touch with someone who can modify this site, and/or perhaps for someone (that contact-person or a webcompat teammember, perhaps?) to try to reverse-engineer what they're trying to do in the first place, per comment 1.

To get us started, I found the snippet of JS that sets pointer-events:none -- it's in this chunk at the very end of [1], and I've tidied it for readability (the source is minified, sadly):
=====
function(t, e) {
  "use strict";

  function n(t) {
    var e = void 0,
      n = function() {
        e = null, t.style.pointerEvents = ""
      },
      o = function() {
        t.style.pointerEvents = "none", clearTimeout(e), e = setTimeout(n, 300)
      };
    window.addEventListener("scroll", o)
  }
  Object.defineProperty(e, "__esModule", {
    value: !0
  }), e.default = n
}]);
=====
[1] https://static1.squarespace.com/static/ta/5630eeb2e4b0f305212292bf/183/scripts/site-bundle.js

Comment 5

[Daniel Holbert [:dholbert]]

Hi Liz -- it looks like you authored the blog post at https://blog.mozilla.org/internetcitizen/2018/11/01/data-leeks-made-with-love-leaked-by-hackers/ , so maybe you are in a position to edit this SquareSpace page, or you know someone who might be?

(The page has some odd JS that triggers a Firefox bug right now, and is hopefully unnecessary/removable... see comment 4.)

Comment 6

[Liz Hull]

Hi! I don't have access to edit the site but I do indeed know who does. Adding Tim Lillis here.

Comment 7

[Tim]

Hello, I can edit the site. Let me know what to paste where, or if anyone is in SF, we can get together this afternoon and do it real quick. CAUTION: I'm not a dev.

Comment 8

[Karl Dubost💡 :karlcow]

Thanks Markus and Daniel. Super cool.

ok found a mention of this script in 
https://answers.squarespace.com/questions/178324/how-to-disable-part-of-js-code-from-hautefarro-tem.html

> We found where is the problem - haute/farro templates has a JS code bundle file (/scripts/site-bundle.js) 
> that loads many functions 

> We found that buggy code belongs to siteScroll plugin loaded by haute/farro and dossier templates.
> We found also that it is bind to HTML tag as data-controller = 'siteScroll'
> So to fix it, we decided to inject some JS code that will change that data-controller attribute for HTML when page loaded, and we injected this piece of code to header and also to footer (for bulletproof):
> 
> <script type="text/javascript">
>  document.documentElement.setAttribute('data-controller', null);
> </script>
>
> Looks like it doesn't allow siteScroll plugin to load and problem solved. 


Trying to dig a big more into this. I found.
https://github.com/Squarefront/squarespace-dossier-template/blob/master/scripts/controllers/SiteScroll.js

I opened https://github.com/Squarefront/squarespace-dossier-template/issues/1

Comment 9

[Karl Dubost💡 :karlcow]

Trying to discover what could have been the origin and wondering if it creates more webcompat issue we didn't know how to identify.
https://www.thecssninja.com/css/pointer-events-60fps
https://pineco.de/css-quick-tip-block-pointer-events-from-css/

Comment 10

[Tim]

Thanks Karl, let me know if there is action for me to take.

Comment 11

[Karl Dubost💡 :karlcow]

Tim,

yes to inject this in your template and test it:

<script type="text/javascript">
  document.documentElement.setAttribute('data-controller', null);
</script>

Thanks.

Comment 12

[Tim]

Hi Karl, added and tested. Improved performance for me, please confirm it's better for you as well.

Comment 13

[Daniel Holbert [:dholbert]]

It seems better for me -- if I look at the page in devtools, I'm not seeing "pointer-events:none" being dynamically added to the HTML node anymore (per comment 1).  And, scrolling the page feels normal on Linux (mousewheel scrolling) and Android (touch scrolling) now.

So I think this is FIXED by comment 11's suggestion, implemented in comment 12. Please reopen if I'm mistaken though.  Thanks to everyone who pitched in here!