3

Mac の Chrome と Safari の両方で特定のテキストが表示されないという奇妙な問題が発生しています。

他のすべてのブラウザーでは、テキストは完全に表示されますが、なぜこれが起こっているのかわかりません。Firebug および Chrome 開発者ツールでデバッグしましたが、成功しませんでした。

次に例を示します。

ファイアフォックス ここに画像の説明を入力

クロム ここに画像の説明を入力

更新: Javascript は次のとおりです。

function openProductInfo() {
    closeAllProductInfo();
    $('#overlay').show();
    $('#info').css({visibility: 'visible', opacity: 0});
    $('#info').animate({opacity: 1}, 250);
    $('#options a.info').addClass('active');
    infoVisible = true;
}

$('.info').click(function() {
    if (infoVisible) { 
        $('#info').animate({opacity: 0}, 250, function() {  
            closeAllProductInfo(); 
        }); 
    } else { 
        openProductInfo(); 
    }

    return false;
});

$('#overlay').click(function() {
    if (infoVisible) { 
        $('#info').animate({opacity:0}, 250, function() { 
            closeAllProductInfo(); 
        }); 
    }
});

ライブサイトはこちら：

http://fine-grain-2.myshopify.com/products/the-bowden-black-walnut

4

3 に答える 3

1

Chromeでテストしました。'#info' divは非表示になっているようです（visibility：hidden）。'visibility'ではなく'display'の使用を検討することをお勧めします。

于 2013-02-26T23:20:14.157 に答える
1

わかりました私は最終的に問題が何であるかを理解しました。

このサイトではフォントを使用していますが、本文フォントの代わり@font-faceに使用すると、何らかの理由で、CSS3 トランジションと JavaScript トランジションのみに関連付けられたテキストが非表示になりました。AvenirLightAvenir

なぜこれが起こっているのか、なぜ Mac の Webkit ブラウザだけで起こっているのか、私にはまだわかりません。

これを理解してみましょう！

ここに私の@font-face宣言があります：

@font-face {
    font-family: "Avenir";
    font-style: normal;
    font-weight: 600;
    src: url("AvenirLTStd-Medium.otf") format("opentype");
}
@font-face {
    font-family: "AvenirBold";
    font-style: normal;
    font-weight: 600;
    src: url("AvenirLTStd-Black.otf") format("opentype");
}
@font-face {
    font-family: "AvenirLight";
    font-style: normal;
    font-weight: 600;
    src: url("12-Avenir-Light.ttf") format("opentype");
}

これが私が宣言した場所ですbody font-family：

body {
    background: none repeat scroll 0 0 #999999;
    font-family: Avenir;
    font-weight: normal;
}
于 2013-02-27T11:31:11.427 に答える