panzoom

IE9-11 and Edge 13-14+ do not respect transform values set through CSS. This makes it impossible to use CSS transitions on SVG elements in those browsers.

Nevertheless, why not enable them in the browsers where it works? Chrome, Firefox, and Safari do this just fine.

• jquery.panzoom 3.0+ adds support for jQuery 3.0 (version number parity is coincidental). This included removing the jquery.event.pointertouch plugin–it broke since the event extension API had changed. The result was mainly that the originalEvent property got used more often.
• I dropped support for pointer events because of pointer event issues in IE11. They weren't really adding anything and users were disabling pointer event support through hacks.

New features

1. contain: 'automatic' option. Greatly simplified contain option logic in the process.
2. disableXAxis and disableYAxis options.
3. panOnlyWhenZoomed option
4. exponential zoom option - Zoom increments exponentially rather than linearly. This is somewhat experimental, but still enabled by default. Linear incrementation was just too slow.

Notable bug fixes

1. Fixed an issue where rotations with negative values were getting reset to 0.
2. Moved backface-visibility:hidden style to parent to avoid blur on SVG images, but still promote the animation to its own composite layer for optimal performance.
3. IE11 had a false positive on a feature test for the input event. IE11 now uses the change event fallback.

Full 2.0.6 to 3.1.1 changelog

Settings transform styles is not supported in IE. Unfortunately, this means that transitions are not supported for SVG, but transforms work again in all browsers.

See #86.

By default, whenever the focal option was used it disabled animations. It was meant to be used with pinch zooming and mousewheel zooming, which should not animate. However, I've seen some cases where focal has been used and animating is necessary.

Migrating

If you've been using the focal option with the mousewheel, make sure to set animate to false.

$panzoom.parent().on('mousewheel.focal', function( e ) {
  e.preventDefault();
  var delta = e.delta || e.originalEvent.wheelDelta;
  var zoomOut = delta ? delta < 0 : e.originalEvent.deltaY > 0;
  $panzoom.panzoom('zoom', zoomOut, {
    increment: 0.1,
    focal: e,
    animate: false
  });
});

Aside from this change, the latest updates to panzoom are also really exciting.

1. Improved performance across the board. Every panzoom element now has its own compositor layer.
2. Improved support for CommonJS loading.

• Use absolute values of scale when calculating margins in setMatrix
• Integrate jquery.event.pointertouch
  • project page

This release fixes an issue with focal point zooming when the panzoom element's dimensions differed than its parent.

This option isn't documented, but it's there for super users. An explanation of this option is available in the source.

When the panzoom element was larger than the container, inverted containment was off.

Manifest files are now linted during development.

• The inverted containment option has been added.

Imagine your panzoom element is an image tag that spans the entire page. When contain: true is set, the image can never pan because the image is the same size as its parent. Instead, set contain: invert when initializing panzoom and you can pan the element whenever it is zoomed in. The image won't pan off-screen and you'll never see anything behind that image.