Comments (12)
Feel free to create a PR to fix this issue. There also was a different issue (in the chat), that in chrome the event fires far more often than in Firefox. It would make sense if chrome fires it for every px instead of line. What about figuring out how high a DOM_DELTA_LINE is in Firefox and multiply by that amount? Feels more stable...
from svg.panzoom.js.
As per https://stackoverflow.com/questions/20110224/what-is-the-height-of-a-line-in-a-wheel-event-deltamode-dom-delta-line , computing the exact pixel height is difficult :( But for my case of using zoom, I don't need it to be pixel accurate, I just don't want it to be unusable. Would you accept a simple PR multiplying by 17 just to make it usable again ?
from svg.panzoom.js.
The thing is: I used panzoom in both browsers and never had an issue with scroll speed. Is this something which is only present on linux?
from svg.panzoom.js.
according to w3c/uievents#181 (comment) it should be slow with firefox on all platforms..
Maybe you haven't seen the problem because you only changed recently in 01a627a Date: Wed Jan 29 07:01:21 2020 +0100 (release 2.1.0)
- let lvl = this.zoom() - zoomFactor * ev.deltaY / Math.abs(ev.deltaY)
+ let lvl = Math.pow(1 + zoomFactor, (-1) * ev.deltaY / 100) * this.zoom()
before you had "ev.deltaY / Math.abs(ev.deltaY)" which was always +1 or -1
now you use ev.deltaY directly
from svg.panzoom.js.
No, actually I tried it with that change. But I could be wrong. Do you mind creating a codepen with a minimal example so I can look into the issue?
from svg.panzoom.js.
Sure, here you go: https://codepen.io/jonenst/pen/PoPbxrg
I used
https://unpkg.com/@svgdotjs/[email protected]/dist/svg.js
https://unpkg.com/@svgdotjs/[email protected]/dist/svg.panzoom.js
and here's a ®high quality gif ™ of it (on the right chrome zooming, on the left firefox)
cheers,
Jon
from svg.panzoom.js.
jep confirmed - that sucks...
If the events indeed fire different number of times we have to go with your solution. But if they fire about the same amount, we can just use +-1 again instead of the delta
from svg.panzoom.js.
The nice thing with using the real value of deltaY is that you get slow/fast scrolling with a touchpad depending on how fast you swipe.
Also, if we use something like
(if deltaMode == 1) {
deltaY = deltaY * PIXELS_PER_LINE
}
Then it will only affect the firefox broken case. Make PIXELS_PER_LINE configurable and it should work for everyone ?
I don't know how many events are fired but I don't think going back to the +-1 is the best option.
By the way, if you have a windows machine, maybe you can try to look what happens when the browser uses deltaMode=2 ( https://i.stack.imgur.com/3AtUg.png ), if zooming is fixable in this mode or not.
Cheers,
Jon
from svg.panzoom.js.
That could work. I hereby declare to not support deltaMode=2. This is just nonesense...
from svg.panzoom.js.
Do you want me to do the PR ? You might know better how to make the PIXELS_PER_LINE value configurable
from svg.panzoom.js.
just add an option. It should be quite obvious were to put it :)
from svg.panzoom.js.
There are too many inconsistencies with delta values across browsers, even today. Related web spec issue:
from svg.panzoom.js.
Related Issues (20)
- .panZoom is not a function on ES6 modules HOT 5
- low accuracy HOT 5
- [FeatureRequest] Programmatically fit an element into the view HOT 2
- Pan working but not zoom HOT 1
- Panning does not work if I use the margins property HOT 49
- Get current zoom factor HOT 2
- SVG not defined error HOT 18
- Cannot use in SVG files (no type=module) HOT 1
- Request: add event detail to panZoom HOT 4
- New feature: keyboard navigation HOT 3
- Update basic demo to include viewbox HOT 4
- When oneFingerPan is true clicks on SVG elements are not working anymore HOT 13
- Is it possible to obtain the real coordinates within the SVG if the user has zoomed in/out? HOT 3
- pinchZoom: Add option to change the zoom factor HOT 1
- need the zoomend event,is there another way to achieve it?
- Please add a method to pan svg programmatically HOT 7
- Pan / Zoom is blocking <input> in foreignObject HOT 2
- Question: Apply CSS to and svg while zooming HOT 4
- Feature request: transformer key HOT 1
- Select text and copy HOT 3
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from svg.panzoom.js.