1

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

4

1 に答える 1

2

HTC Desire HD や他のデバイスでも発生する可能性があるこのような問題に遭遇したことがある場合は、次の方法で解決できます。

background-position を 1px 上に移動し、shadow の位置を 1px 下に移動しました (下 100% から上:-19px)。これらの設定では、背景画像は上から 1px カットされ、「自動」境界線は追加レンダリングされません。

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;
}
于 2013-10-04T08:18:50.593 に答える