pinchzoom: Height for the container in the initialization of the script is not correct which hides the element

So, I was testing this library for the first time using the example given in the doc, but it didn’t work. I was able to track the problem. I changed the following to the way it was in a previous release.

updateAspectRatio: function() {
  // current
 // this.setContainerY(this.container.parentElement.offsetHeight);
 // fix 
 this.setContainerY(this.getContainerX() / this.getAspectRatio());
},

This is what I used when the problem occurred: My HTML.

<div class='parent'>
  <div class='image-container'>
      <img src='/images/Bowser.png'></div>
  </div>
</div>

let el = document.querySelector('.image-container');
let pz = new PinchZoom(el, {});

It didn’t show anything until I made the change. I found out that when this library initializes, it sets the ‘image-container’ absolute and generates ‘this.container’ element with an relative position, the ‘this.container’ 's offsetHeight is zero which parent is also zero.

About this issue

Original URL
State: open
Created 6 years ago
Reactions: 2
Comments: 17 (4 by maintainers)

Most upvoted comments

Somewhat late to the party, but let me chime in here with @micgro42 that with the recent changes to this library you now have to explicitly set the size of the parent (i.e. the parent element of the original image, not the div with class pinch-zoom-container) in order for everything to work. If you’re not held back by browser compatibility issues, a nice way to set the parent size is via flexbox.

Note that the height of the parent must be set before the PinchZoom library initializes, as the PinchZoom library uses the value to set an inline height style and does not re-measure the value later on.

One of the issues that was fixed with the changes from @micgro42, in de-coupling the height of the container from the aspect ratio of the image, is that the image can now be zoomed in to fill the container completely, even when they have very different aspect ratios. This becomes very apparent if you have a tall container (portrait) and a wide image (landscape), in which case the image, when zoomed in, would never fill the entire height of the container.

zyniq82 on Aug 3, 2018

Super late here, but the problem is that the ‘parent’ block, ‘.pinch-zoom-container’, is set to have an absolute position before we get the parent’s height. That means if the parent doesn’t have an explicit height, with no other content, and isn’t being scaled by something like flex, then the parent’s container’s height will ALWAYS be zero. Hopefully that’s a bug. Would be kind of strange for that to be an intentional design in my book.

bdion-pixel on Nov 30, 2020