Blurry image after zoom issue on Ionic app

img {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
}

Over a year or so, we have gotten sporadic complaints about the low resolution of images when zoomed, which were converted from document files like pdf and users have to zoom in on to read text. We first thought it was those picky users who are not happy with the photos uploaded with super-high resolution ending up being downsized to FHD or lower. (Come on! We are not the cloud storage company!)

After several repeated complaints, We had the feeling that something must be wrong and I, the one-man dev team decided to investigate the cases.

I found that they were using iOS 14 or higher, while our customer service team tested it on iOS 13. Pulled out my iOS-14 iPhone and confirmed it myself. On Android 10, 9, no problem.

Started googling, spent a whole day with some wrong angles, and then I stumbled upon this in Stack overflow:

img {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
}

why this resolves the issue ?

Get Daniel Kim’s stories in your inbox

Join Medium for free to get updates from this writer.

Remember me for faster sign in

Some web engines (in iOS 14 and some old Android versions) draw the image with a downgraded resolution to fit the view size before a zoom. On zooming in, they seem to redraw based on the downgraded image data, not on the original (for a better performance?).

Adding translateZ(0) sends the image to GPU to be rendered, using a whole different (and more expansive but still cheap) set of rendering rules.

I was truly thankful to those who repeatedly reported the issue to us and happy to fix the issue with that simple solution.

Phonegap image is blurry and does not redraw that image after zoom

CSS performance relative to translateZ(0)

https://www.smashingmagazine.com/2016/12/gpu-animation-doing-it-right/