HTML zooming leads to incorrect translate values

[johnpaul87]

When using the mouse wheel or pinch to zoom to certain area to zoom, it receives translateX and translateY and results to not going to the right place when zoomed.

JS:

$(function() {
  var t = new EasyPZ(document.getElementsByClassName('container')[0], function(transform) {
    $(".yeah").css({
      "transform": "translateX(" + transform.translateX + "px) translateY(" + transform.translateY + "px) scale(" + transform.scale + ")",
      "-webkit-transform": "translateX(" + transform.translateX + "px) translateY(" + transform.translateY + "px) scale(" + transform.scale + ")",
    });
  });
});

CSS

html,
body {
  width: 100%;
  height: 100%;
  padding: 0px;
  margin: 0px;
}

.container {
  background-color: red;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.yeah {
  background-color: orange;
  width: 100%;
  height: 100%;
}

HTML:

<div class="container">
  <div class="yeah">
    Some content that im going to manipulate
  </div>
</div>

Fiddle: https://jsfiddle.net/06mgqv8u/

[rudaoshi]

yes, I found the problem too. The svg do not zoom at the point and moves away

[michaschwab]

Hi and thanks for posting this issue! Is the title meant to include the word "incorrect"?

The issue here is that browsers treat HTML and SVG differently. Taking your example, and making no changes other than mapping the HTML elements to corresponding SVG elements, EasyPZ zooms in to the correct location: https://jsfiddle.net/michaschwab/wyh6L1qo/5/

So, EasyPZ's translate values are correct, but the issue here is that EasyPZ is designed for SVG whereas you're using it on HTML. If someone could point me to some resource that explains how SVG and HTML transformations differ, then I can add an extension to EasyPZ, which is a flag to EasyPZ that does the calculation for HTML elements instead of for SVG elements. I just don't know how the two differ at the moment.

[pepkin88]

I think the difference comes from different point of reference. In svg, transformations of the inner elements are applied in relation to the svg element. In case of css transforms of html elements, the transformation is in relation to the element itself (with an adjustment from the transform-origin property).

More about it: https://css-tricks.com/transforms-on-svg-elements/