[Refresh Draggable child overflow size after content resize]

Oh, wow. That's a much better and bigger answer than I expected. 

I see 2 issues though:

1. Click location seems not to be working on iPhone (6) so the zoom happens from top left corner regardless of where I click/tap.
2. How do I incorporate pinch/zoom on smartphones? I know hammer.js adds support recognizing those events but how is that added into GSAP?

[Refresh Draggable child overflow size after content resize]

In the long run I want to reach this kind of behavior:
http://www.asos.com/asos/asos-stripe-top-with-ruffle-front-tie-waist/prd/7336893

[Refresh Draggable child overflow size after content resize]

I've created a new demo that shows the issue:

Update: 

See the Pen LxWLEp by KenBKK (@KenBKK) on CodePen

The desired result is to be able to change the content / size inside draggable and make it dragglable / scrollable with both mouse and touch without overscrolling. 

[Refresh Draggable child overflow size after content resize]

See the Pen WRpNby by anon (@anon) on CodePen

 

I hope I did it right. It's my first CodePen

[Refresh Draggable child overflow size after content resize]

I'm trying to use draggable for zooming in and pan pictures. When I zoom out the picture with scale

TweenLite.set(image, {scaleX:0.5, scaleY:0.5})

then the scrollable overflow size remains the same.

Example:
Draggable is 200x200px
The picture is originally 1000x1000px, so the initial overflow area is 1000x1000px.
After scaling the picture becomes 500x500px but scrollable/draggable remains 1000x1000px. The picture has a 250px margin around is and now I can drag the picture out of sight. What I want is that the overflow area collapses to 500x500px.

I tried skipping scale and set height. Then the scrollable overflow height adapts but not the width. I can drag the image out of sight.

 

In source code I see that then dynamically inserted <div> has a padding-right that causeses this.

 

How can I fix this? I'm scratching my head for hours now.