透明度问题定制手机按钮图标 [英] Custom mobile button icon with transparency issue

问题描述

我使用的是圆形的巴纽透明为自定义按钮图标，但我看周围的图标方形，半透明背景上的Andr​​oid 4.2.2浏览器。它似乎有望在所有我们的目标，包括在Android 4.1.2默认Web浏览器（与三星Galaxy S2测试），除了为Android 4.2.2默认Web浏览器的浏览器中显示（与三星Galaxy测试S4）。

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).

截图：

（错误）

（预期）

(Bug) (Expected)

的jsfiddle

这里是一个说明这个问题的jsfiddle。这是我的全code的一个简化版本，但我已经测试并验证该问题是否与此演示（三星Galaxy S4）发生

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. :)

推荐答案

的问题是，jQuery Mobile的增加了一个半透明的背景和边界半径来的图标（的.ui图标）。目前在Android 4.2.2 已知的bug （果冻豆），元素在其中显示的元素边框外的背景色被指定的边界半径属性时。机票上的注释指出，这个问题似乎被固定在目前的测试版（29.0.1547.23），然而此修复程序可能不会出现在大-S $ P $垫的推出有一段时间了。

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.

有关此问题的CSS修复图标的属性无设置之前设置背景背景图片。

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

下面是更新CSS样式：

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;
}

查看更新拨弄。

这是一个不幸的问题，作为唯一的解决方法是去除背景色，或添加的背景颜色到图像本身。

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

这篇关于透明度问题定制手机按钮图标的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！