文本在Mac上的webkit浏览器中不可见，但在所有其他浏览器上都可见

Question

我遇到一个奇怪的问题，在Mac上的Chrome和Safari中都看不到某些文字。

在所有其他浏览器中，文本完全可见，我不知道为什么会发生这种情况。我在Firebug和Chrome Developer工具中调试过没有任何成功。

以下是一个例子：

火狐

铬

更新：这是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

Answer 1

我在Chrome中测试了它。 “#info”div似乎是隐藏的（可见性：隐藏）。 您可能需要考虑使用“显示”而不是“可见性”。

Answer 2

好的，我终于找到了问题所在。

我正在为此网站使用@font-face字体，出于某些原因，当我使用AvenirLight代替Avenir作为正文字体时，它使文本仅与CSS3过渡和JavaScript相关联过渡无形。

我仍然不知道为什么会这样，以及为什么它只发生在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;
}

Answer 3

如果您将CSS3 transition属性应用于已应用#info属性的visibility:hidden; div，则即使应用{{1}后也不会显示该属性在一定的状态之后到达它。

我也有这个问题，我不得不从该div中删除visibility: visible;属性。尝试删除CSS3 transition属性，看看是否有效。