Android grainy background full size image by pressing and holding screen device

Question

I'm developing an application with phonegap(css3 + html5 + javascript) for iOS and Android 4.x. On Android 4.0.3 device, I use with css a background image as button with this code:

.mycssClass
{
   background-image:url(../images/myImage.png);
   background-repeat:no-repeat;
   background-size:100%;
   background-color:transparent;
   border:none;
   font-weight:300;
   ....
 }

Now, the image is displayed correctly, but if I hold down on the screen, it becomes grainy. If I remove background-size:100%; solved the problem, but the image is not displayed in the correct size. I add some code lines for managing anti-aliasing, based on the proposal of this aid

https://developer.mozilla.org/en-US/docs/CSS/image-rendering

without good result.

Any suggestions?

Thanks in advance, Cristian

Answer 1

Your issue have solution.

Problem happens because of difference between antialiasing mechanisms in CSS engine and Android WebView component. CSS antialiases images before they were scaled and browser antialiasing is being applied after scaling.

To avoid this effect you have to disable scaling somehow.

There is good approach which allows to keep responsive images and avoid scaling. Replace your background with img tag and apply CanvasImage to them after page is loaded.

CanvasImage replaces img elements with canvases of same size as element is at the moment of execution so there will be no scaling.

Feel free to ping me if you will have any problems with this.