Panzoom: Use proper dimensions for containment

Created on 30 Aug 2016  ·  10Comments  ·  Source: timmywil/panzoom

Subject of the issue

Containment is using parent dimensions in place of panzoom element dimensions sometimes.

Your environment

  • version of jquery.panzoom 3.2.2
  • version of jquery 3.1.0
  • which browser and its version Chrome 52

    Steps to reproduce

http://jsbin.com/cidebod/edit?html,css,js,output

bug

Most helpful comment

@arkoe Updated Pull Request#279 to handle your issue. Unfortunately I couldn't update your examples. Let me know if it works.

All 10 comments

@timmywil we had this bug recently, and we just wrote a fix and opened a PR. Please checkout: https://github.com/timmywil/jquery.panzoom/pull/279/files or download it directly.

@awartani I'm facing the same issue and your fix didn't work.

The problem occurs when the parent div has smaller dimensions than the panzoom element (the image).

@timmywil Any idea when this will be fixed? I really love the project and would love to use it :-).

@arkoe I think you have tested the wrong branch, I updated your example. Please check http://jsbin.com/gigadis/edit?html,css,js,output

@awartani In your example the panzoom element (blue square) is smaller than the parent. When you make the element bigger than its parent, it bugs. Also please note, I didn't create this issue; I'm just hooking in :)

Sorry @arkoe I assumed that you created this issue. I understand now the problem and I think it might be easy to solve. Please take a look at Pull Request#279 specifically:

if (contain === 'invert' || (contain === 'automatic' && zoomAspectH < 1.01)) {
//original code
} else {
//my fix
var originalHeight = height / scale;
var originDiff = (originalHeight - height) / 2;
matrix[5] = Math.max(Math.min(matrix[5], conHeight - originalHeight + originDiff), -originDiff);
}

Because I don't know much how to test the first if statement and it's not what I am looking for , I fixed the else statement. I believe if you took the same fix and tweak it a little bit you will be able to solve it.

@awartani I have been using your PR and tried playing with that. Spend quite a few hours already, and can't seem to get it fixed. Is there anything on your mind that might point me in the right direction to fix this? Thanks for your quick responses by the way! Really appreciated.

@arkoe I had something to try it but I need to get in and try it, can you push a sample code and I will try to look at it tonight.

@awartani I have uploaded two examples, demo.html is the dist file from @timmywil, demo2.html is using your fix. http://arko.io/x/panzoom/demo.html http://arko.io/x/panzoom/demo2.html

@arkoe Updated Pull Request#279 to handle your issue. Unfortunately I couldn't update your examples. Let me know if it works.

Thnx @awartani. Fixed my issues perfectly!

Was this page helpful?
0 / 5 - 0 ratings

Related issues

gavJackson picture gavJackson  ·  3Comments

jsblanco picture jsblanco  ·  19Comments

nich008 picture nich008  ·  14Comments

rpallares picture rpallares  ·  3Comments

adred picture adred  ·  21Comments