jScrollPane icon indicating copy to clipboard operation
jScrollPane copied to clipboard

Scrolling by arrows is broken when browser zoom is enabled.

Open theo-bittencourt opened this issue 11 years ago • 22 comments

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!

theo-bittencourt avatar Jun 15 '13 18:06 theo-bittencourt

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!!

szepeviktor avatar Jun 17 '13 18:06 szepeviktor

@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?

vitch avatar Jul 22 '13 13:07 vitch

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

szepeviktor avatar Jul 22 '13 15:07 szepeviktor

@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?

vitch avatar Jul 24 '13 09:07 vitch

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 avatar Jul 24 '13 11:07 szepeviktor

any updates on this?

szepeviktor avatar Jan 14 '14 13:01 szepeviktor

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

szepeviktor avatar Apr 10 '15 14:04 szepeviktor

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...

vitch avatar Apr 10 '15 14:04 vitch

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

szepeviktor avatar Apr 10 '15 16:04 szepeviktor

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?

vitch avatar Apr 10 '15 16:04 vitch

This site is vertically responsive - using scale().

szepeviktor avatar Apr 10 '15 16:04 szepeviktor

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

szepeviktor avatar Apr 10 '15 16:04 szepeviktor

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...

vitch avatar Apr 10 '15 16:04 vitch

Thank you.

szepeviktor avatar Apr 10 '15 20:04 szepeviktor

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.

ljani avatar Mar 03 '16 10:03 ljani

Is this still problem?

illuusio avatar Jun 06 '18 11:06 illuusio

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

ps. you commit with non-GitHub emails

szepeviktor avatar Jun 06 '18 11:06 szepeviktor

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

illuusio avatar Jun 06 '18 14:06 illuusio

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

szepeviktor avatar Jun 06 '18 14:06 szepeviktor

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

illuusio avatar Jun 06 '18 14:06 illuusio

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

szepeviktor avatar Jun 06 '18 14:06 szepeviktor

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

illuusio avatar Jun 07 '18 05:06 illuusio