Custom mobile button icon with transparency issue

问题

I am using a circular .png with transparency as a custom button icon, but am seeing a square, semi-transparent background around the icon on the Android 4.2.2 browser. It seems to be displaying as expected in all of the browsers that we are targeting, including on the Android 4.1.2 default web browser (tested with Samsung Galaxy S2), except for the Android 4.2.2 default web browser (tested with Samsung Galaxy S4).

Screenshots:

(Bug)

(Expected)

jsFiddle

Here is a jsFiddle that demonstrates this issue. It is a stripped version of my full code, but I have tested and verified that the issue does occur with this demo (Samsung Galaxy S4).

CSS:

.ui-icon-main-nav {
    background-image: url(/presentation/generic/includes/images/mobile/main-nav-icon.png);
    -moz-background-size: 17px 17px;
    -o-background-size: 17px 17px;
    -webkit-background-size: 17px 17px;
    background-size: 17px 17px;
    height: 17px;
    width: 17px;
    border: none;
    margin-top: -2px;
}

HTML:

...
<!-- ui-icon-main-nav is created by jQuery Mobile -->
<span class="ui-icon ui-icon-main-nav">&nbsp;</span>
...

Does anyone know what is causing this issue?

Thank you all for your help. :)

回答1:

The problem is that jQuery Mobile adds a semi-transparent background and a border-radius to the icons (.ui-icon). There is a known bug on Android 4.2.2 (Jelly Bean), in which the background color of an element displays outside of the element's border when the border-radius property is specified. A comment on the ticket states that the issue "seems to be fixed in the current beta (29.0.1547.23)", however this fix may not appear in a wide-spread roll-out for some time.

The CSS fix for this issue is to set the background property of the icon to none before setting the background-image.

Here is the updated CSS style:

.ui-icon-main-nav {
    background: none;
    background-image: url(/presentation/generic/includes/images/mobile/main-nav-icon.png);
    -moz-background-size: 17px 17px;
    -o-background-size: 17px 17px;
    -webkit-background-size: 17px 17px;
    background-size: 17px 17px;
    height: 17px;
    width: 17px;
    border: none;
    margin-top: -2px;
}

See the updated fiddle.

This is an unfortunate issue, as the only resolution is to remove the background color, or add the background color into the image, itself.

来源：https://stackoverflow.com/questions/17835262/custom-mobile-button-icon-with-transparency-issue

标签

android

jquery

jquery-mobile

background-image