tomhodgins / element-queries-spec

A spec for a Container-Style Element Query Syntax
https://tomhodgins.github.io/element-queries-spec/element-queries.html
367 stars 14 forks source link

Slow performance on Firefox when using scrollbar #6

Open scooterlord opened 7 years ago

scooterlord commented 7 years ago

Hello there again! Hope you are well.

I've been having some performance issues lately on our app and managed to pinpoint it to the EQCSS code and more specifically to the part when there is an event listener for mousemove.

The issue occurs only when using the mouse to scroll with the scrollbar, and doesn't happen when scrolling with the wheel. This is due to the code:

    window.addEventListener("mousemove", function(){
      if(EQCSS_mouse_down){
        EQCSS.throttle();
      }
    });

I am trying to figure out what is the purpose of re-running the EQCSS code in the mousemove and input listeners. I mean, it's self-explanatory to use it on resize, click, even mouse up (in browser resize, and/or tabs use) but what about mousemove and input? What am I missing here?

Once again thanks for your time!

tomhodgins commented 7 years ago

Hi Nick! The event listener for mouseup only send EQCSS.throttle() while the mouse is down. This means click-and-drag functionality can meet EQCSS conditions before the mouseup event!

I wonder if there's a way we could make it ignore the scrollbar and only send EQCSS.throttle() if you're clicking on an element inside the page 🤔

scooterlord commented 7 years ago

Hello Tom and thanks for your reply. However, the question is, in which case scenario would this be used? Why would a user need an EQCSS trigger on mousemove?

tomhodgins commented 7 years ago

Hi Nick!

The reason for the mousemove functionality is so that EQCSS will recalculate during times when the user is clicking and dragging elements on the page, without the browser resizing. Many of the demos on http://elementqueries.com make use of this (allowing you to click and drag until the query applies and you see it right away) or for building things like this:

I'm still looking at ways to test to see if there browser is aware whether you're clicking on the document versus a scrollbar and I've had some success, but it's hard finding a scrollbar-detecting test that works reliably in all browsers.

scooterlord commented 7 years ago

Aha, now it makes sense. I'll try to squeeze some tests as soon as I find some spare time concerning the detection of using mousedown on a scrollbar.