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

Scrolling by arrows is broken when browser zoom is enabled. #238

Open
theo-bittencourt opened this issue Jun 15, 2013 · 22 comments
Open

Scrolling by arrows is broken when browser zoom is enabled. #238

theo-bittencourt opened this issue Jun 15, 2013 · 22 comments
Labels
Bug fix Help Needed If you have spare time you can test these Need testing

Comments

@theo-bittencourt
Copy link

If I set animateScroll: true and apply web page's zoom (in/out), the scrolling by arrows don't work properly.

You can see that here:
http://jscrollpane.kelvinluck.com/scroll_to_animate.html

Don't forget to set the zoom. ;)

Thank so much!

@szepeviktor
Copy link

Yes, if you add this CSS line

#container { transform: scale(1.1); }

and your mouse's scroll wheel to scroll down, jsp scrolls UP - but not at the very top, up to ~10%
Please help where to debug!!

@vitch
Copy link
Owner

vitch commented Jul 22, 2013

@theo-bittencourt - it seems to work fine for me in the current version of Chrome. What browser did you see the problem in?

@szepeviktor - does this effect the demos of the mousewheel plugin or is it specifically a jScrollPane thing?

@szepeviktor
Copy link

video proof: http://www.youtube.com/watch?v=9OOgWF_qoN8&hd=1
watch it in full screen! or use an embedded link: http://www.youtube.com/embed/9OOgWF_qoN8?vq=hd720

@vitch
Copy link
Owner

vitch commented Jul 24, 2013

@szepeviktor - I don't have the bandwidth where I am now to watch the video I'm afraid. I didn't claim that what you describe doesn't happen though... My question was whether the confusion is coming from the mousewheel plugin that jScrollPane uses to find out when the user has used the mouse wheel or whether the problem is due to some code in jScrollPane itself.

If you add your CSS to the mousewheel tests do they behave the same as when the transform isn't set or do they behave differently?

@szepeviktor
Copy link

the video contains a part when I do the same scrolling on mousewheel's test page - it does the scrolling in the right direction
so - I think - it is a jsp issue

@szepeviktor
Copy link

any updates on this?

@szepeviktor
Copy link

@vitch Do you have an advise for me?
http://www.youtube.com/watch?v=9OOgWF_qoN8

@vitch
Copy link
Owner

vitch commented Apr 10, 2015

Sorry for the slow reply - I was travelling when you opened the issue and couldn't watch the video on the connection I had available...

Interesting problem! I had a dig and it seems that the calculation on line 1298 goes wrong when scale is applied.

contentPositionY() returns the position of element with scaling applied while the other numbers are without the scaling applied.

In your case you could hard code a / 1.1 into contentPositionY but I'll look for a more general solution...

@szepeviktor
Copy link

@vitch How could I detect scale() level is Javascript?

@vitch
Copy link
Owner

vitch commented Apr 10, 2015

That's what I wasn't sure of and I couldn't find a quick solution.

The best approach may be for me to expose a setting for "transformScaleAmount" or something which you could manually set. If you know what you have set the transform to then you could pass the same value in.

Otherwise the code could traverse all parents checking what .css('transform') was set to but I can imagine that could get very complex (e.g. what happens when there are nested transforms?) and maybe not be reliable...

Would the first idea work in your situation?

@szepeviktor
Copy link

This site is vertically responsive - using scale().

@szepeviktor
Copy link

@vitch Do you find it possible to integrate getComputedStyle into jScrollPane?
https://css-tricks.com/get-value-of-css-rotation-through-javascript/

@vitch
Copy link
Owner

vitch commented Apr 10, 2015

So the scale is set dynamically? If it was a setting then you could re-init the scrollpane with the new value whenever you changed it...

getComputedStyle doesn't seem to help. It returns none for transform when the element is nested in something which has a scale set - basically it's the same as .css('transform' in that you'd need to traverse the parents and calculate the number.

The other alternative would be to find an alternative to scrollHeight that returned the correct height taking into account the transform...

@szepeviktor
Copy link

Thank you.

@ljani
Copy link

ljani commented Mar 3, 2016

I'm running into this issue (or similar?) with IE8 and zoom. I can detect the zoom level reliably, but I'd guess that the problem is that jQuery reports wrong values with e.pageY, $.position() and $.offset(), etc. The values are reported as scaled (multiplied) with the zoom level. I'm not sure if there's a good way to solve this.

@illuusio
Copy link
Collaborator

illuusio commented Jun 6, 2018

Is this still problem?

@szepeviktor
Copy link

@illuusio If it is not fixed - probably - then yes.

ps. you commit with non-GitHub emails

@illuusio
Copy link
Collaborator

illuusio commented Jun 6, 2018

Probably not. I have to see how to fix that commit thing, any ideas?

@szepeviktor
Copy link

check git config --global user.email
set git config --global user.email "[email protected]"
only for this repo git config user.email "[email protected]"

@illuusio
Copy link
Collaborator

illuusio commented Jun 6, 2018

Ok it was incorrect Email but do you have any clues or willing to make PR about this?

@szepeviktor
Copy link

szepeviktor commented Jun 6, 2018

You seem to have force-pushed those last commits as they have a GitHub email now.

@illuusio
Copy link
Collaborator

illuusio commented Jun 7, 2018

I just added my other email to Github setup and it started to work. I have to find time to investigate this.

@illuusio illuusio added Bug fix Need testing Help Needed If you have spare time you can test these labels Jun 7, 2018
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Bug fix Help Needed If you have spare time you can test these Need testing
Projects
None yet
Development

No branches or pull requests

5 participants