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

【问题标题】：Text not visible in webkit browsers on Mac, but visible on all other browsers文本在 Mac 上的 webkit 浏览器中不可见，但在所有其他浏览器中可见
【发布时间】：2023-03-06 03:06:01
【问题描述】：

我遇到了一个奇怪的问题，即某些文本在 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

【问题讨论】：

它对我来说很好用（Chrome 25、Windows）
你在使用 Mac @nhahtdh 吗？
我猜这是字体的问题（反正只是一种预感）。反正我没有测试。
@nhahtdh 否，如果浏览器找不到字体，则默认为标准字体。
尝试删除动画并忽略不透明度。这样能解决吗？

标签： html css macos google-chrome webkit

【解决方案1】：

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

【讨论】：

在控制台中输入$('#info').css({visibility: 'visible'});确实显示文本 FWIW。
感谢您查看此内容。我相信单击详细信息链接时，JavaScript 会将其更改为visibility: 'visible'。
@ZachL 您的意思是当您手动输入$('#info').css({visibility: 'visible'}); 时，它会在 Mac 版 Chrome 中可见吗？ JS 应该这样做......嗯，当我回到家并在我的 Mac 上时，我会调查它。没有 Mac 在工作:(
嘿，我很抱歉 - 我不知何故错过了“Mac”的东西。无论如何检查可能是一件好事..

【解决方案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");
}

这里是我声明bodyfont-family的地方：

body {
    background: none repeat scroll 0 0 #999999;
    font-family: Avenir;
    font-weight: normal;
}

【讨论】：

【解决方案3】：

如果您将 CSS3 transition 属性应用到应用了 visibility:hidden; 属性的 #info div，则即使在特定状态后对其应用 visibility: visible; 后，它也不会显示。

我也遇到了这个问题，我不得不从该 div 中删除 transition 属性。尝试删除 CSS3 transition 属性，看看是否可行。

【讨论】：