Phonegap application has rendering issues on Samsung Galaxy S3

Question

I have a footer with shadow created on :after element, by using background-image with proper file in png format. The image is 20px high, 5px wide, and goes from black (bottom) to transparent (top).

It is visible and properly working on all devices, but on Samsung Galaxy s3 on the top border of created shadow there is visible 1px thick gray line. It disappears, when I press screen for a second and when antialiasing on scaled graphics is disappearing. After normal tap it comes back.

It looks like after redrawing and rescaling all graphics, rendering engine is leaving that line. Has anyone encountered an issue like this?

Here is part of a screenshot from device running app. http://i.imgur.com/eMglrfr.png

I will appreciate all possible solutions. Thanks

Answer 1

In case anyone has encountered such an issue, which looks like can appear also on HTC Desire HD and possibly on other devices, here is how I managed to solve it.

I have moved background-position by 1px up and lowered shadow position by 1px down (from bottom 100% to top:-19px). With those settings, background image is being cut 1px from top, and there is no "auto" border additionaly rendered.

footer:after {
    background: url("../img/shadowup.png") repeat-x scroll 0 -1px rgba(0, 0, 0, 0);
    top:-19px;
    content: "";
    height:20px;
    width:100%;
    left: 0;
    position: absolute;
}