Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Slow performance on Firefox when using scrollbar #6

Open
scooterlord opened this issue Mar 16, 2017 · 4 comments
Open

Slow performance on Firefox when using scrollbar #6

scooterlord opened this issue Mar 16, 2017 · 4 comments

Comments

@scooterlord
Copy link

scooterlord commented Mar 16, 2017

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
Copy link
Owner

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
Copy link
Author

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
Copy link
Owner

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
Copy link
Author

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants