Calling card image is blurry and does not redraw this image after enlargement

I have a very complicated problem here, I tried to find a solution for this for a while but failed. Perhaps this is a restriction on Phonegap or OS Browser (restriction on using phone mail as web browsing). I'm not sure...

Ok, here's my problem ..

I have 4000x3000 resolution and Phonegap app has function to scale html image or html text using css3 transform: scale ()

First of all, testing on DESKTOP web browser, when I zoom in high resolution image and html text, image and text become blurry after zooming in. But after a few milliseconds, the desktop browser redraws it, which makes the image and text clearer. Of course this is the default browser behavior

Now in the Phonegap box by default I am displaying the image via <img> and apply css3 transform: scale (0.5) to reduce the size of the image on mobile, now when I double tap on the image I will zoom in and apply the css3 transform: scale (2.5 )

The problem with Phonegap is that when I zoom in, the phone delay doesn't redraw the image, which makes the image blurry. The blurry image is very important to me because the image contains texts and the text is not readable when scaling.

And it is important to note that the redrawing does not happen using the Samsung S3 with the JellyBean OS (Android) version, while the Xiaomi phone with the KitKat (Android) version does the redrawing. I also found a similar issue in iOS7 using ipodtouch5

I'm not sure if this can be fixed with code or if this is a browser limitation.

Has anyone encountered this problem?

Hope someone has a solution.

We hope to help everyone

thank

+3


source to share


1 answer


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

      



This works for me on Android and iOS (except for WKWebView plugins).

+1


source







All Articles