0

カスタム ボタン アイコンとして透明な円形.pngを使用していますが、Android 4.2.2 ブラウザーでアイコンの周りに正方形の半透明の背景が表示されます。Android 4.1.2 の既定の Web ブラウザー (Samsung Galaxy S2 でテスト済み) を含む、ターゲットとしているすべてのブラウザーで期待どおりに表示されているようですが、Android 4.2.2 の既定の Web ブラウザー (Samsung Galaxy でテスト済み) は除きます。 S4)。


スクリーンショット:

(バグ) バグ - Android 4.2.2 デフォルトの Web ブラウザ (予想) 想定 - デスクトップ用 Chrome


jsフィドル

この問題を示す jsFiddle を次に示します。これは私の完全なコードの削除されたバージョンですが、このデモ (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>
...


この問題の原因を知っている人はいますか?


ご協力ありがとうございました。:)

4

1 に答える 1

0

問題は、jQuery Mobile が半透明の背景とborder-radiusをアイコンに追加することです ( .ui-icon)。Android 4.2.2 (Jelly Bean) には既知のバグborder-radiusがあり、プロパティが指定されたときに要素の背景色が要素の境界線の外側に表示されます。チケットのコメントには、この問題は「現在のベータ版 (29.0.1547.23) で修正されているようだ」と記載されていますが、この修正はしばらくの間、広範囲に公開されない可能性があります。

この問題に対する CSS の修正backgroundは、アイコンのプロパティをnoneに設定してからbackground-image.


更新された CSS スタイルは次のとおりです。

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

更新された fiddleを参照してください。


背景色を削除するか、画像自体に背景色を追加するしか解決策がないため、これは残念な問題です。

于 2013-07-24T15:47:21.790 に答える