Zoom and Pan with IE

[ariutta]

We have some major issues with IE. See here for more info.

[ariutta]

See the SVGWeb pan/zoom code for Wikipedia for possible improvements/ways of handling this. Here's another pan/zoom example.

[bcoughlan]

I have some fixes for IE11 (unfortunately IE11 removes compatibility mode so I can't test on previous versions :/).

First is that the viewport overflows its boundaries. This is a known issue that HTML5 Boilerplate normalises by doing svg:not(:root) { overflow: hidden; }

I added this in setupHandlers() to do the same:

svg.setAttribute('style', 'overflow: hidden');

But the case of it being a root node (i.e. viewing raw SVG file) has to be handled too... something like wrapping it with if (svg.parentNode != null).

The problem of no zoom on scroll is trickier. Currently the code does some browser detection... not a great idea. I used this code to setup the mouse wheel callbacks:

    //Cross-browser mouse wheel event, adapted from https://github.com/brandonaaron/jquery-mousewheel
    var toBind = ( 'onwheel' in document || document.documentMode >= 9 ) ?
                    ['wheel'] : ['mousewheel', 'DomMouseScroll', 'MozMousePixelScroll'];
    for ( var i = toBind.length; i; ) {
        svg.addEventListener( toBind[--i], handleMouseWheel, false );
    }   

The problem is that this breaks the wheel delta code in handleMouseWheel(). The repository mentioned above has wheel delta normalisation code that makes the behaviour consistent across all browsers and devices, but it's encapsulated in a jQuery plugin so it would have to be copypasted from that code to use with svg-pan-zoom.

I don't have my own computer at the moment so I can't submit patches for this for a while. Hope it helps anyways.

[ariutta]

Thanks, @bcoughlan!

[bumbu]

At the beginning image is not set correctly (ie9, 10). On panning start (on mouseDown) image is zoomedOut and panned. Zooming seems to just move the image (without scaling).

It seems that the bug appeared somewhere after e20d5c0ed1bc5a1d1a8cf697b8ae776d2de480f7

[ariutta]

I'll what I figure out for this.

[ariutta]

I think I fixed this, but I'll test sometime this week to make sure.

[bumbu]

It seems to be working fine (except the case when initial SVG has a viewPort attribute, but I mentioned this in Readme)

[Sidarth1989]

Hi, I was trying to use your plugin for panning and zooming purposes. It works great everywhere except in IE. The zoomin functionality doesn't work in IE because of the viewbox attribute set to the inline svg. Works fine without the viewbox but I don't want to remove the viewbox attribute. Any workaround for this ?

[bumbu]

Hi,

Unfortunately currently there is no solution for this.

I have following solutions/workarounds in mind:

• Changing library core so that it will not alter viewBox and all calculations would take in account that it may run with viewBox attribute (involves a lot of work on internals). This sounds like the right way to solve the problem but I have a feeling that viewBox may add some undesirable constraints to the app.
• Overcoming IE problem that does not allow to remove/change viewBox attribute by cloning entire SVG (and removing viewBox before injecting SVG into DOM) (needs some research and not that much of work on internals)
• Overcoming IE problem with viewBox by wrapping inner content into a SVGGElement () that would have transform matrix attribute that would counterweight viewBox effect. But I have no idea if that will work as expected.

So it needs some more research. If you have any ideas or solutions then you are welcome to share them here.

[Sidarth1989]

I see that you have released version 3.00 of svg-pan-zoom.js. I incorporated it in my code and this new version works fine with IE 10 even with the viewbox attribute set. Though there is small issue with the initial position of the svg objects and the pan-zoom controls but the pan and zoom functions are working fine

[bumbu]

You can post an example of your code on a public service (like jsfiddle.net). This will make it easier to understand the problem. Thanks.

[sid08]

Hi, I am currently using your plugin for svg pan/zoom. It works fine in all cases except one. If the svg document has width and height not equivalent to viewBox width and height (ex, svgW=100, svgH=100, vboxW=1000, vboxH=1000), the svg looses its quality and appears faded. In my example, I have viewBox width and height ten times the actual width and height. I have debugged the code and found that on removal of viewBox attribute, the svg stretches to maximum width and height which results in quality loss. Can you please suggest a fix for this? Thank you.

[bumbu]

Can you please post an example of your code on a public service (like jsfiddle.net). This will make it easier to debug and search for a solution. Thanks.

[sid08]

Hi, Can you please suggest what could be the changes to alter the library core such that we do not remove the viewBox attribute.

Thank you.

[bumbu]

Viewport transform matrix alteration should be done taking in account viewBox values. Probably the easiest way to do so would be right before setting CTM but it may also require updating some other inner values (mostly related to viewBox).

[ddotlic]

This in fact works well with IE9-11, with the latest version (3.2.9) except if you're using bower which is stuck on 3.2.8 (despite version being bumped in bower.json to 3.2.9).

@ariutta Could you please make 3.2.9 a github release so that bower can consider as such? Thanks!

Additionally, IMHO you can close this item at the same time :smile:

[bumbu]

@ddotlic 3.2.9 release published

[bluegaspode]

Starting with svg-pan-zoom 3.2.8 I ran into IE issues as well (using Inkscape SVGs which have the viewbox-attribute set). Updating to 3.2.9 solved all the issues I was having, namely:

• SVG now renders with correct initial size (i.e. filling the assigned viewport at 100%)
• Panning + Zooming also works fine now.

Thanks a lot for releasing 3.2.9!

[mobiniusHarshajagadish]

Hello @bluegaspode and @bumbu , How do I access version 3.2.9 ? because http://ariutta.github.io/svg-pan-zoom/dist/svg-pan-zoom.min.js still refers to 3.2.5

[bumbu]

Hi @mobiniusHarshajagadish, You shouldn't use GitHub pages as a CDN for the library. Usually you either host the files on your server or bundle them together with your dependencies. If you don't want to host the library on your server then you can check the CDN section from readme. Also check the list of releases as 3.2.9 is quite old by now.

[mobiniusHarshajagadish]

oops. My bad. Will check. Thanks @bumbu

[mobiniusHarshajagadish]

Hi @bumbu , I am currently using version 3.5.0. The zoom functionality works great on all browsers except IE-11 on Windows 10. It is removing the elements on the SVG. May I know the resolution for this ?

[bumbu]

Hey @mobiniusHarshajagadish It is really hard to help without a proper example. Can you please create a minimal reproducible example and post it here.