<ion-scroll zooming="true">-Tag won't seem to allow zooming in Modal Dialogs

Question

So I have run into a very strange problem. While having set everything to have it scrollable, as well as only using percentage-values, my modal dialog won't allow me to zoom in with a finger pinch. Is this a bug, or am I just too stupid to get this to work?

I also took a look at the meta tags in my index.html and they seem to be fine, and my CSS is not of fault either, I think.

<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1, user-scalable=no" />

The code for the modal dialog looks something like this:

<div class="modal image-modal transparent" on-swipe-down="closeModal()">
<ion-scroll direction="xy" scrollbar-x="false" scrollbar-y="false"
            zooming="true" min-zoom="{{zoomMin}}" style="width: 100%; height: 100%"
            delegate-handle="scrollHandle" on-scroll="updateSlideStatus()" on-release="updateSlideStatus()">

    <div class="image" style="background-image: url( {{pictureURL}} )"></div>
</ion-scroll>

According to Documentation, zooming="true" should allow zooming for that specific Element. In my case, I only want the user to be able to zoom in on the div that contains the picture, but it does not seem to allow me to do that.

My whole Code, in case this is actually done right, but something else was done wrong, like the meta-tags is here -> Website ZipFile

The file causing that problem is "displayDetailImage.html" in the templates-folder, and I do assume that this might be a bug in Ionic using modal template views?

Answer 1

Try turning on jsscrolling if you have it on.

$ionicConfigProvider.scrolling.jsScrolling(true);

If zooming now works then change it back to false then add overflow-scroll="false" to your ion-scroll container.

i.e.

<ion-scroll overflow-scroll="false">
My content I want to zoom in
</ion-scroll>