bug: Image gets blurred when zoomed in ion-scroll

[paishin]

Type: bug

Platform: all

I am using ion-scroll to zoom on an image but when I zoom on it it appears blurred (image resolution is good enough).

I suspect that the image does not get re-rendered when I zoom but instead it just stretches the initially rendered image.

Is there a way we can force the re-rendering?

[perrygovier]

Hey @paishin, could you provide a codepen example of what you're seeing?

[rasco]

I'm experiencing the same problem.
It actually happens with the example from http://ionicframework.com/docs/api/directive/ionScroll/
It's not nearly as sharp as when testing in the browser (the text is unreadable).

Oh, forgot to say this: it only happens on iOS

[pranoliver]

Hi,

I am facing the same problem with android platform.

This happens with very high resolution images also.

[paishin]

@perrygovier I have created this codepen http://codepen.io/paishin/pen/QwLZYJ that has simmilar coding to what I am using but I do not know how to test zooming on codepen to see if it actually happens or not in the browser.

[Ollebolle]

I am having the same issue. I have tried using svg files but same problem there. Attached you can find two screenshots of what happens. Basically it seems that if you render an image to 100% width (for example) it will simply zoom into that same rendered resized image and not rerender it based on the zoom level. This problem is, of course, even worse on low-ppi devices....

I have tried with differenet files with 8000px wide jpg as well as svg files. The attached screenshots show an example using a svg file.

Ps. I have tried this: https://github.com/mhartington/PinchToZoom as well as my own test files. I am seeing the same issues on several devices on both iOS and Android.

For my current project I am dependant on being able to zoom quite a bit in svg files and I would therefore love if there is a solution for this! :)

Thanks!

[Kukiwon]

I have the same issue too. I'm trying to display a PNG of about 5000x2300 in an ionScroll directive. In the browser on my desktop, the image is rendered nicely, like so:
http://pbrd.co/1G72yk3

On my iPhone 6 however, the image looks like this:
http://pasteboard.co/2hHvsNZU.png
As you can see the text has become unreadable.

Does anyone know the cause of this? Is there an alternative (better) way to display such a large image with Ionic?

Thanks in advance!

[DURK]

I'm also having this issue. I found out that Android compresses large resolution images even further due to this issue. But on iOS this shouldn't be a problem.

I found out that ion-scroll uses zynga and that pbakaus/scroller#28 is supposed to be the issue that causes the problem. But that issue has been unresolved for over 2 years, so that's not too promising.

Does anyone know a solution to this or know of any alternatives?

[paishin]

Very interested to find out alternatives to this as well as this has been
an issue for us for quite some time and I don't see things getting better
any time soon.

On Thu, Jan 29, 2015 at 4:53 PM, Dirk-Jan Hoek notifications@github.com
wrote:

I'm also having this issue. I found out that Android compresses large
resolution images even further due to this issue
http://stackoverflow.com/questions/6632140/android-pixel-quality-reduction-in-images-loaded-in-webview?rq=1.
But on iOS this shouldn't be a problem.

I found out that ion-scroll uses zynga and that pbakaus/scroller#28
pbakaus/scroller#28 is supposed to be the issue
that causes the problem. But that issue has been unresolved for over 2
years, so that's not too promising.

Does anyone know a solution to this or know of any alternatives?

—
Reply to this email directly or view it on GitHub
#2033 (comment).

[rasco]

Don't know if this is a good enough solution for anyone else but in my case I was able to use a PDF file with window.open() and the org.apache.cordova.inappbrowser plugin.

[DURK]

Thanks for the suggestion @rasco. In my case that's not gonna work, because I need to interact with the image (placing pins on a map).

[mhartington]

Yeah, since this comes from zynga, not sure what can be done here.

But you can use the built in gestures to create your own pinch-to-zoom

http://codepen.io/mhartington/pen/ogpNBM