Ionic-framework: zoom in ion-scroll not working in beta 2.0

[yelhouti]

Short description of the problem:

zoom option in <ion-scroll> is not working in beta 2.0m also the scrollY is poorly working on iOS.

What behavior are you expecting?

I'm expecting the zoom to work when I add zoom="true" and maxZoom="2" to <ion-scroll>

Steps to reproduce:

1. use the code provided below (modification of demo)
2. pinch the screen

this the code from the demo modified

<ion-content>
    <ion-scroll maxZoom="2" zoom="true" scrollX="true" scrollY="true" style="width: 100%; height: 100%">
        <div class="map-div"></div>
    </ion-scroll>
</ion-content>

<style>
    .map-div {
        width: 2600px;
        height: 1400px;
        background: url('./map.jpeg') no-repeat;
    }
</style>

Ionic Version: 2.0

Browser & Operating System: iOS / Chrome

Run ionic info from terminal/cmd prompt:

Cordova CLI: 6.0.0
Ionic Version: 2.0.0-beta.1
Ionic CLI Version: 2.0.0-beta.17
Ionic App Lib Version: 2.0.0-beta.8
ios-deploy version: 1.8.5 
ios-sim version: 5.0.1 
OS: Mac OS X El Capitan
Node Version: v4.3.1
Xcode version: Xcode 7.2.1 Build version 7C1002 

[jgw96]

Hello thanks for opening an issue with us! Since this issue could be considered a duplicate of the two issues referenced above I will be closing this issue. Please feel free to continue the conversation on this issue over there! Thanks again!

[arsenslyusarchuk]

The closed one issue is about Ionic1 and not Ionic2. Why have u closed that? It's still not working for Ionic2

[iRoachie]

@jgw96 Could you guys stop closing issues so quickly? The issue is not resolved. The issue you linked to is for Ionic 1. It is still broken in Ionic 2

[iRoachie]

@manucorporat @jgw96 Can we get an update from the team on the progress of this? I see on this issue #6482 it was removed from the milestone

[manucorporat]

@iRoachie I am not sure this feature will make it before 2.0 final release.
But I agree, <ion-scroll> needs some love, it has been abandoned.

I have started cleaning up the code, not sure how to implement the zoom yet (maybe hammer? + scale3d), I have to talk with the team.

[iRoachie]

@manucorporat Could we at least put a note in the docs saying it doesn't work currently? I tried a workaround using (pan) event;

const scale = e.srcEvent.scale;
const newWidth = scale * 100;

Only thing is that the pan event fires after the pinch, so it's a delayed zoom

[zakton5]

Any way this could make it to the next milestone?

[iliagerman]

Hi, any news?

[diegofal]

Looks like there are a lot of people experiencing this problem, but none of them have been able to find a solution to it.

The latest thing I found comes from this repo: https://github.com/nikini/ionic-gallery-modal/tree/master/src

It implements a custom zoomable-image, which seems to work fine. Cons are that its complexity is quite high if you need to build it on your own. Also, this must be supported in Ionic2, so eventually it might change.

If anybody has something better, please share!

[KevRyan2]

@jgw96 have there been any updates made for a solution to this issue? (following your reference over from issue #6788 )

[zakton5]

@jgw96 @manucorporat @brandyscarney
Why do bugs in core features (zooming, virtual scroll, etc.) keep getting ignored. Ionic team, you are doing great work, but please take some time to fix these core issues that prevent many people from creating production ready applications.

@manucorporat even said _8 months ago_ that this bug needed some serious attention...

[ngjonnathan]

Any news on this issue? or there is another solution?

[zakton5]

Of course not. I'll probably attempt to make a PR for this soon, as I really need it.

[594727294]

Please fix this Ionic Team, it is imperative.

After 3 months of development of an important app in a team for a big corporation we are starting to regret our framework choice, from poor documentation to bugs like this.

[jmesao]

Hi ionic team,

Please, you fix this, we are waiting a lot of time... I´m also starting to regret of this framework, thanks.

[leonardosalles]

+1

[christianwico]

This framework is making hybrid look bad. This is a fundamental feature and yet it isn't working?

I'm starting to regret this choice of tech stack.

Over a year, guys. Over a year.

[lewcianci]

I know you're all volunteers and I'm sorry you have to read some of these comments, Ionic Team. But I know that I definitely need this as well :( 👍

[ghost]

Could you please put the same effort on this issue as you're putting into the CLI? Thank you.

[adamduren]

My guess is the Ionic team is focused on Ionic 4 in which all components will be rewritten as Stencil components so Ionic 2/3 issues are getting neglected. Although if this is the case it would be nice for it to be communicated vs being left hanging.

Looking at the scroll component it's pretty minimal and a lot of the code zoom, maxZoom, and addScrollEventListener is unused throught the codebase. It's probably best to submit an PR that fixes this issue or implement a custom component while we wait for the Stencil release of Ionic and hope that the issue is no longer present.

[leonardosalles]

As @adamduren said, I decided to implement a custom component and after that I open sourced the code, you guys can use and submit your issues and PR's at https://github.com/leonardosalles/ionic2-zoom-area

thanks.

[praveenraji2i]

Still, the issue is not resolved..

Any news on this?

[leonardosalles]

Ionic team are working in Ionic 4 release, think this issue will be not solved :rage2:

[freeweed]

Hello There, Here is my solution. Hope It's help another body.
https://github.com/freeweed/ionic-panzoom

[leonardosalles]

Hello There, Here is my solution. Hope It's help another body.
https://github.com/freeweed/ionic-panzoom

I stopped on jQuery...

[freeweed]

@leonardosalles I before jQuery I try zoom-area, And it's can't even build with --prod flag. sadly

[ionitron-bot[bot]]

Thanks for the issue! We have moved the source code and issues for Ionic 3 into a separate repository. I am moving this issue to the repository for Ionic 3. Please track this issue over there.

Thank you for using Ionic!

[ionitron-bot[bot]]

Issue moved to: https://github.com/ionic-team/ionic-v3/issues/41