1

iPhoneとAndroid用のphonegapアプリを開発しています。

ユーザーがボタンをクリックすると表示される読み込みメッセージを含む黒いオーバーレイがあります。

iOS ではすべて問題ありませんが、Android では、fadeIn() 関数はオーバーレイの一部のみを表示します。まさに、部品のようです。下だけの場合もあれば、下と右上の角の場合もあります...本当に変です。

代わりに .show() を使用すると、すべてがうまくいきます。

このようなものを見たことがありますか？(ひどい品質ですが、下半分にオーバーレイが見え、右上隅に半透明のオーバーレイが見えます。)

ここに画像の説明を入力

Android の .fadeIn() 関数の何が問題になっていますか?

（必要な場合はここにcssがあります）

.black-overlay {
    position: absolute;
    width: 100%;
    height: 120%;
    background-color: #000;
    color: #FFF;
    display: none;
    z-index: 99999;
    top:0;
}

そして、HTML コードの冒頭:

<body class="side">
        <div class="black-overlay row-fluid"> //overlay
            <div class="span12 loading-splash">
                <div class="span12"><span>Chargement...</span></div>
                <div class="span12 span-no-margin"><img src="img/ajax-loader_black.gif" alt=""></div>
            </div>
        </div>
        <div class="app container-fluid event-creation"> //Rest of the app...
4

1 に答える 1

0

背景オーバーレイに使用する CSS を次に示します。

.ajax-loader-background
{
    background-color: rgba(0,0,0,0.2);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#30000000,endColorstr=#30000000);
    zoom: 1; /* Force hasLayout in IE. */
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;

    z-index: 99999;
}

で異なる結果が得られる理由は.fadeInわかりませんが、jQuery は要素の幅/高さを知る必要がある場合があり、要素が表示されない場合は幅/高さがゼロになります。

width: 100%と の間にわずかな違いがあることに気付きましたleft: 0px; right: 0px。と同じheight: 100%。120%また、絶対配置で見たことのない高さを設定しています。オーバーレイの場合、これを行う必要はありません。

于 2013-05-10T16:14:24.243 に答える