Can't zoom or pinch image in ionic 1.2

[xyxabcdiy]

Platform: Android 5.1.1 After updating to 1.2.1 from 1.1, zooming and pinch seems broken in the ion-scroll, there is my code: HTML:

<ion-slide-box on-slide-changed="slideChanged(index)" show-pager="false" active-slide="activeSlide">
            <ion-slide ng-repeat="image in allImages">
                <ion-scroll direction="xy" scrollbar-x="false" scrollbar-y="false"
                            zooming="true" min-zoom="{{zoomMin}}" style="width: 100%;height: 100%"
                            delegate-handle="scrollHandle{{$index}}" on-scroll="updateSlideStatus(activeSlide)"
                            on-release="updateSlideStatus(activeSlide)">
                    <div class="image" style="background-image: url({{image}})"></div>
                    <!--<img class="full-image" ng-src="{{image}}">-->
                </ion-scroll>
            </ion-slide>
        </ion-slide-box>

JS:

$scope.updateSlideStatus = function (slide) {
            var zoomFactor = $ionicScrollDelegate.$getByHandle("scrollHandle" + slide).getScrollPosition().zoom;
            if (zoomFactor == $scope.zoomMin) {
                $ionicSlideBoxDelegate.enableSlide(true);
            } else {
                $ionicSlideBoxDelegate.enableSlide(false);
            }
        };

[phuongpt]

It can be fixed by adding overflow-scroll="false" into ion-scroll tag.

[soulfresh]

Thanks, @phuongpt! I just ran into this on Friday.

[vance]

so there's no way to zoom with native scroll?

[surlac]

Doesn't work on Android 6.0.1, Ionic 1.3.1. Code from ion-scroll example with overflow-scroll="false". Please let me know what info I can provide to narrow the problem down.

[vance]

I ended up writing my own pinch and zoom engine to enable this for native scroll. basically, i had to do a crazy thing where i doubled the size of my ion-scroll, then used pinch to apply a css transform scale() on the whole scroll area... don't get me started on how hard it was to rectify drag and drop coordinates after this. So, believe me, I tried every trick I could before resorting to this.

Does anyone know if ionic 2 will support this, or if this is a huge shortfall of Cordova?

[vance]

Why doesn't NATIVE scroll support zooming? Obviously a natively scrolled website in the browser can pinch and zoom. Otherwise, here's the math to convert coordinates to and from the manually transformed ion-scroll, assuming you resize it to 2x window dimensions.

  var toScrollCoord = function(x,y) {

    var zf = zoomFactor;
    if( zoomFactor < .5 ){
      zf = .5;
    }

    var inv = 1 / ( zf );
    var w = window.innerWidth;
    var h = window.innerHeight;
    var centerW = {
      left:w/2,
      top:h/2
    }
    var centerS = {
      left:w ,
      top:h
    }

    if( zoomFactor > .5 ) {

      return {
        left: ((x - centerW.left) * inv + centerS.left) + left,
        top: ((y - centerW.top) * inv + centerS.top) + top
      }
    }

    var cScale = .5 + zoomFactor;
    return {
      left: (((x - centerW.left) * inv + centerS.left) + left ) / cScale ,
      top: (((y - centerW.top) * inv + centerS.top ) + top) / cScale
    }
  }

  var toWindowCoord = function(x,y){

    var zf = zoomFactor;x
    if( zoomFactor < .5 ){
      zf = .5;
    }
    var w = window.innerWidth;
    var h = window.innerHeight;
    var centerW = {
      left:w/2,
      top:h/2
    }
    var centerS = {
      left:w ,
      top:h
    }

    if( zoomFactor > .5 ){
      return {
        left: (x - left - centerS.left) * zf  + centerW.left,
        top: (y - top - centerS.top) * zf  + centerW.top,
      }
    }
    var cScale = .5 + zoomFactor;
    return {
      left: ((x - centerS.left) * zf + centerW.left) * cScale - left * zf,
      top: ((y - centerS.top) * zf  + centerW.top) * cScale - top *zf,
    }
}

[JerryBels]

Adding overflow-scroll="false" doesn't help. On Android 6.0.1 and last version of Ionic zooming doesn't work at all.

[ceoaliongroo]

I fixed changing the global configuration: $ionicConfigProvider.scrolling.jsScrolling(true)

More in this answer of the forum

[vance]

this is the #1 Jank in my application. so there's no way to zoom with native scroll? JS scroll is not performant enough.