Ion-scroll blurry content - not only image

ionic-v1
1

I’m using ion-scroll with zooming. Inside ion-scroll I have div with image background. Inside this div there are also other elements, which are not images. When I do zoom in all the content getting blurry. If it was a case of image, I might think that the quality of the image is wrong. But also other elements are blurry:

image
Pharma_Sales_Tool.png821×646 264 KB

When I’m testing on Chrome and turn off and turn on inline styles added by ion-scroll, the quality is again correct ->
-webkit-transform: translate3d(-919px, -258.11296042466px, 0px) scale(2);

image
Pharma_Sales_Tool2.png744×553 136 KB

2

I prepared little demo to show what I mean. The zoom in/zoom out is on mouse hold:

I think the problem is with translate3D. When I remove it after scaling, the content is becoming sharp. But I understand that for performance reason this is required to have it. Maybe somebody has this kind of problem and found the solution for that ?

---- Edit
I found this is known problem: https://github.com/driftyco/ionic/issues/2033. Unfortunately, no solution so far :frowning:

3

I’m having the same issue. Your suggested solution of removing the translate3D also didn’t work for me on iOS. In Chrome, the image renders fine.

Does anyone know any alternatives to this, inside an ionic app?

4

I just posted a related issue here: Android Rendering Woes (Blurry) pre-5.0 only - currently investigating workarounds.

5

Browsers do this for performance optimization, there’s no need to keep the hi-res version of the image when the page is rendered.

I was able to get around this by loading the image in full size then using the $ionicScrollDelegate handle to display the correctly zoomed. It isn’t very elegant but it works in iOS and Android.