D3.js zoom is not working with mousewheel in safari - javascript

I'm using D3 v4 to achieve the zoom functionality and everything works perfectly on FireFox, Chrome browsers.
Quite different behavior with Safari browser (my version is Version 10.0.1 (12602.2.14.0.7)). Wheel zoom works for g element and doesn't work for svg element. Note: that dbClick zoom works for svg element.
I've created simple fiddle example where tried to reproduce the issue.
If you try wheel zoom over red rect - it will work, outside of rect - not work, but works for other browsers.
I was looking for official examples like https://bl.ocks.org/mbostock/db6b4335bf1662b413e7968910104f0f where everything works and I could not find a problem with my example...
Here is a zones where zoom works (madness is that left and top zone in the svg has working zoom):

I got answer from mbostock:
PROBLEM:
As shown in the https://jsfiddle.net/vbabenko/5shshq97/7/ , this is a Safari bug (or if you like, an alternative interpretation of the specification). Safari does not dispatch wheel events to the SVG when there is no SVG content under the pointer; the events get sent to whatever is underneath the SVG element (the body in this case). In contrast other browsers dispatch wheel events to the SVG element anywhere inside its bounding rect.
SOLUTION:
If you want the SVG to receive the event on all browsers, you must put some content in the SVG to capture the wheel event. Here is a fixed test case: https://bl.ocks.org/mbostock/9e3fed7a5904991e7973a87628d9f84d
ORIGINAL DISCUSSION:
https://github.com/d3/d3/issues/3035

Related

Mouse wheel event, not working as expected in Firefox, when using Highcharts with PerfectScrollbar

I'm using the highcharts library, it's related plugins and using the perfect scrollbar for scrolling. The chart is extended with plugin for "zooming out" and "zooming in" (on mouse wheel event) and it is placed under the parent DIV element (on which the perfect scrollbar is implemented).
Note that this is how it should work:
when user mouse is hovering the chart and user is scrolling the mouse wheel, the chart is "zoomed out" / "zoomed in" (the events from the highchart plugin is applied);
if user is not hovering the chart with the mouse and if is scrolling the mouse wheel, then the parent DIV is scrolled down;
The mentioned scenario is already implemented in the following jsfiddle and this works on Chrome browser: https://jsfiddle.net/delux123/4kh5zbxv/68/
But the problem is that this is not working on Mozilla Firefox browser. There, the chart is not "zooming out" / "zooming in" for the cases when user mouse is above the chart;
I'm was not able to detect which one of these two libraries is causing the issue, but the mouse wheel event is somehow included in the issue. I tried many combinations here, but was not able to make it working as expected in the both browsers.
EDIT:
Here is the solution based on the #User863 answer below:
https://jsfiddle.net/delux123/4kh5zbxv/73/
The problem is delta calculated is always -1 in Firefox
Instead, you can use deltaY directly from the event
let delta = e.deltaY;
https://jsfiddle.net/aswinkumar863/085nvLad/
Without using perfectScrollbar
From version 64, firefox having scrollbar-width, scrollbar-color property. So you can style scrollbar also
https://jsfiddle.net/aswinkumar863/nf4y3qeh/

SVG Rotate does not work on IE - Codepen works perfectly on chrome

Rotate function works fine on all browsers except IE.
You use clipPath on the <polygon>, but clipPath animations are not supported in IE. As far as I know, IE supports animation with programatically scripting. For more information, you could refer to the MSDN document: Basic SVG animation.
Here is an article about using polyClips.js to make cross-browser animation, you could also check it to try the library as a workaround.

Drag and drop issue in Chrome related to Windows scale (125%)

I have an issue with drag and drop on Chrome (v69.0.3497.100). Specifically, some of the drag and drop events are getting fired when Windows scaling is other than 100% even though they shouldn't be firing.
Check out stackblitz example, and try to drag "blue" rectangle over itself (just drag, move a little bit downwards and drop). If Windows scaling is set to 100% (browser zoom is 100% as well) then one event is fired (dragEnter) as expected (check the console). But, if Windows scaling is set to 125% (but browser zoom is still 100%) then three events are fired (two dragEnter and one dragLeave), and I expected only one event to be fired since the element was dragged and dropped on itself (as it was the case with 100% scale level).
It could be that since this is Windows zoom (and not browser's zoom) the left ("lightred") rectangle is larger that it appears, and it goes below right rectangle, and events are propagated to it, although I couldn't prove that since all elements have correct size in the inspector.
This doesn't seem to be happening in latest Firefox, IE or Edge.
Does anyone know why is this happening and how to fix it?
The more I look at this problem, the more it seems the Chromium issue. Some days ago I posted a question, then I wanted to set up a bounty for it, and then I found your one, and I believe they are interrelated: Subpixel scroll issue, can't set scrollTop properly on Chrome 69.
There are some bug reports in Chromium issue tracker related to scale-rounding problem: link 1, link 2... I also created my own bug: link 3. There should be more information but it takes too much time to research. I think we may join efforts and draw more attention to the problem, and for example if it's Chromium responsibility, to help them with clarification and prioritisation.
I have the same problem with Version 76.0.3809.100 (64-Bit).
And I offset the image to compensate for the strange offset that I get in your stackbliz example too.
But with scaling 200% I need to multiply my calculated dragImage offset by 4 !!!
On 300% it's at 9
On 350% it's at 12.25
Do you see the pattern ???!
I'm afraid of my hack/fix for this problem. Not sure if it's just on windows, if it's just desktop. But for now I guess I will have to do window.devicePixelRatio^2 so I can continue my work.
There are instances where a website has drag-and-drop features that will not work inside the Google Chrome browser.
Fixing Drag-and-Drop
Enter the following into the Google Chrome Top search bar.
Chrome Flags: chrome://flags/
Type Touch into the search bar and set the following options to Enabled.

Drag scrolling jagged in IE

I made a click and drag scrolling Image Viewer here.
It works like a charm in FF and Chrome, but IE is behaving weird. The diagonal movement is jagged, as if the scrolling is slow and every movement is seperately visible.
I'm scrolling the DIV like this (viewPort is a jQuery object).
viewPort[0].scrollTop = newy;
viewPort[0].scrollLeft = newx;
Is anybody able to create a smooth movement in IE9 and IE10?
Edit:
I'm using IE10 on Windows 7. I've seen it working on IE10 on Windows 8.
It is always a good practice, when dealing with mousemove/touchmove, to apply UI changes in a requestAnimationFrame callback. Consider this jsfiddle
I am not sure if this helps, but it is definitely some better approach.
There is event better solution with transforms. You apply for an image position:absolute styles and for the container overflow:hidden and position:relative. After that, you change not the scrollLeft/scrollTop of the container, but translate(Xpx,Ypx) for the image itself.

SVG disappears in firefox on transform

In Safari all is well, in Firefox, the svg is not the correct size and when I transform it, it disappears. I'm running Safari Mac 5.1.7 and Firefox Mac 15.0.
The code was created with d3 but I've just supplied the html.
Now you see it: http://bl.ocks.org/3531350
Now you don't: http://bl.ocks.org/3531267 (edited so it works now)
I imagine I have made a foolish mistake somewhere but I just can't see it!
I can see the svg at the bottom of the grey area if I add height and width attributes of 100% to the outer svg element. They do really need to be there if you are using svg embedded in html. I suspect Safari will require width/height in embedded svg at some point.

Categories