blurred text and images on iOS

[Alessandro_S_]

As you may see, in the images, the same page, sometimes appears blurred and sometimes not.

Only on iOS (tried on iPhone 6).

Why? what I have to change in my css? thank you

[Elroy_A_Intel]

I recommend using images that follow Apple's 1x, 2x, etc guidelines.There is an attribute for the <img> tag that allows you to list the image files of which will be used based on the device platform model. For more information visit http://www.webkit.org/demos/srcset/. iPhone 6 images are expected to follow the 2x guidelines to allow for the best visual quality when rendered on the device's Retina Display.

Also, make sure you are setting the appropriate attributes for the meta tag with viewport.

<meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1, user-scalable=no">

For more information on Apple device support for HTML content visit https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariHTMLRef/Articles/MetaTags.html

[Alessandro_S_]

as You may see, not only images, also text is blurred

So I think images are not the problem, maybe some setting like -webkit-perspective: 0; would fix the problem?

[Elroy_A_Intel · Accepted solution]

This seems to be an issue with the content being rendered by the webView. I recommend trying the following CSS on the body:

body  {
  -webkit-perspective: 0px !important; 
  -webkit-backface-visibility: visible !important;
}

There can also be an issue with the framework that you are using as well.

You can also force the view to be repainted by using the following line in your CSS

body { 
  -webkit-transform: translate3d(0,0,0);
}

[Alessandro_S_]

I notice that on iphones I have to click more than once on icons or divs (with click event) to make it work. Any solution for that?

[Elroy_A_Intel]

This could be related to the framework that you are using or the application logic in your project. 

What framework are you using?

I recommend creating a basic project with at least one icon, button or clickable UI element and evaluate the click response.Your issues could be related to one of the two observations mentioned above.