Safari 图标错误地呈现白色背景

2024-01-04

Edit:我发现这是由于深色模式造成的,因为图标和背景之间没有足够的对比度。但是,还有办法禁用此功能吗?我用图标制作了一个模拟图像文件,对比度似乎足够了。


我正在尝试向HTML网站。但是,在 Safari 中,图标错误地呈现为白色背景(见下图)。这是出乎意料的,因为提供的文件是透明的svg.

为了将 favicon 包含到 safari 中,我使用了mask-iconlink 属性告诉 Safari 图标所在的位置。如果未定义,Safari 将使用默认的图标icon链接属性。然而,我的图标在 Safari 中不能很好地工作,因此使用下面的代码为 Safari 定义了一个单独的图标。

<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#2163d9">

这如下Apple 关于创建固定选项卡图标的开发人员指南 https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariWebContent/pinnedTabs/pinnedTabs.html#//apple_ref/doc/uid/TP40002051-CH18-SW1。指南规定图像文件应符合以下要求:

  • 100% 黑色矢量
  • 一层
  • viewBox的属性0 0 16 16

这里是SVG file.

<svg xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink" width="16" height="16" viewBox="0 0 16 16">
    <defs>
        <style>.a{clip-path:url(#b);}</style>
        <clipPath id="b">
            <rect width="16" height="16"/>
        </clipPath>
    </defs>
    <g id="a" class="a">
        <g transform="translate(-254 -191.5)">
            <path d="M299.962-203.031l-3.973-2.485L299.962-208Z" transform="translate(-31.961 405.016)"/>
            <path d="M-42.6-75.784l5.539,2.769,6-3.985-4.8-3Z" transform="translate(299.062 280.016)"/>
            <path d="M-82-313l6-3,5.625,4.219L-82-304.515Z" transform="translate(338 508)"/>
        </g>
    </g>
</svg>

但是,这仍然会导致网站图标渲染不正确。我已清除网站的缓存并尝试在完全不同的主机上进行操作,但问题仍然存在。

然而,该图标在 MacOS 触摸栏中正确显示(见下图)。

有谁知道为什么 Safari 图标渲染不正确吗?


The color属性在link rel="mask-icon"对于 Safari 固定选项卡 Favicon,是not控制背景,但实际图标的颜色。这是预期的 https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariWebContent/pinnedTabs/pinnedTabs.html#//apple_ref/doc/uid/TP40002051-CH18-SW1.

在示例中,颜色属性设置了显示颜色 图像

但是,正如您正确认识到的那样,它取决于黑暗或明亮模式。 白色的背景仅当我们使用深色模式时,才会添加到 Safari 中的 Favicons。

这可以解释这一点,其他博客也得出这样的结论,即在黑暗模式下,Safari 会自动添加白色背景。

但这不可能是事实。 Apple、Google 和许多其他网站,如果在深色模式下在 Safari 上访问,do not在(固定/选项卡)网站图标中具有白色背景。此外,其中许多对比度非常低。

我注意到在线阅读,Safari Favicons 应该是单色 SVG,我们使用以下命令定义(favicon)颜色color仅属性。我按照这个原则创建了一个网站图标,但我仍然在黑暗模式下得到白色背景。

参考:https://developer.apple.com/design/ human-interface-guidelines/ios/icons-and-images/app-icon https://developer.apple.com/design/human-interface-guidelines/ios/icons-and-images/app-icon https://makandracards.com/makandra/26757-do-not-use-transparent-pngs-for-ios-favicons https://makandracards.com/makandra/26757-do-not-use-transparent-pngs-for-ios-favicons

一个可能的解决方案

假设在深色模式下有一个白色的网站图标,在明亮模式下有一个黑色的网站图标。

if (window.matchMedia('(prefers-color-scheme: dark)').matches === true) {
        console.log('dark');
        document.head.insertAdjacentHTML(
            'beforeend',
            '<link rel="mask-icon" href="/safari-pinned-tab.svg?v=your_dark_mode_fav" color="white">'
        );
    }
    else {
        document.head.insertAdjacentHTML(
            'beforeend',
            '<link rel="mask-icon" href="/safari-pinned-tab.svg?v= your_bright_mode_fav" color="black">'
        );
    }

这不会即时更改,并且需要将缓存清除推送给访问者。

我会继续研究,这仍然不够令人满意。

我想知道如果您在网站图标图像周围放置一个微小(一个像素)的白色边框,会发生什么。这应该(对于分析它的计算机程序)具有非常高的对比度,因此避免添加白色背景,并且肉眼看不到它。

有趣的事实: 我遇到了同样的问题,颜色与你几乎相同#0075be我也认为这已经足够对比了,但似乎还不够。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

Safari 图标错误地呈现白色背景 的相关文章

  • 单击按钮时,如何将数字存储在 html 表单输入中作为 javascript 变量? [关闭]

    Closed 这个问题不符合堆栈溢出指南 help closed questions 目前不接受答案 基本上我想做的是 当用户在 HTML 表单输入字段中输入一个数字 然后按下提交按钮时 该数字将存储在 JavaScript 变量中
  • 如何将文本附加到 div 元素?

    我正在使用 AJAX 将数据附加到 div 元素 我在其中填充 div 来自 JavaScript 如何将新数据附加到 div 而不丢失之前找到的数据 尝试这个 var div document getElementById divID d
  • Bootstrap 手风琴菜单不起作用

    我设计了一个如图所示的手风琴菜单 如果单击菜单 打开的菜单将关闭 这就是手风琴的功能 但在这个设计中 我逐个单击菜单 但前一个没有关闭 如何解决这个问题 提前致谢 jQuery document ready function var acc
  • 水平离子涡旋不工作

    在我正在制作的项目中 我使用了离子滚动两次并且工作完美 垂直模式 但现在我尝试进行水平滚动并且不起作用 滚动出现但我无法滚动任何内容 HTML 代码很简单
  • 使用 Javascript 在单独的表单页面上使用图像文件名更新隐藏的表单字段

    我有一个定制的 Djangowizard form html它在我的调查的三个不同页面上向用户显示了 3 张不同的图像 我正在尝试使用下面的脚本来更新 3 个不同页面上的 3 个隐藏表单字段 其内容为value display image
  • jQuery 数据与 Attr?

    两者的用法有什么区别 data and attr使用时data someAttribute 我的理解是 data存储在 jQuery 中 cache 而不是 DOM 因此 如果我想使用 cache对于数据存储 我应该使用 data 如果我想
  • 如何删除 ng-repeat 的默认顺序

    如何停止动态表数据的 ng repeat 内部的默认排序 目前我收到以下订单 地址 客户 ID 姓名 但我想要的是以下顺序 客户 ID 名称 地址 任何帮助我将不胜感激 JS app controller MyController func
  • 阻止表单 POSTing,直到 javascript 代码得到满足

    每当我点击提交按钮时它就会触发alert empty username 但直接引导我去checklogin php 我怎样才能避免这种情况并让它保留在页面上 除非该字段不为空 function RequiredFields var user
  • 由于浏览器设置的标头,Safari 拒绝重定向的 CORS 请求

    Summary Safari 拒绝一些涉及重定向的 CORS 请求 声称某些标头是不允许的 但该标头从来不是由脚本请求的 而是由浏览器添加的 所以我认为这应该不重要 Safari 的行为是一个错误吗 规格有问题吗 或者 事情变成这样是有原因
  • :hover 状态在 iOS 上不会结束

    我有一个带有悬停状态的简单菜单
  • 使用 bootstrap 将搜索图标放入文本框中

    我默认使用引导程序 文本框占据列的全宽 我想将搜索图标放在文本框的末尾 我的代码是这样的 div class container div class row div class form group col lg 4 div div div
  • 在 Javascript 中动态添加事件处理程序

    我在使用 Javascript 时遇到了一个奇怪的问题 我得到的是一个特定格式的字符串 我将尝试用它创建一个表 该表每行只有一个单元格 字符串的格式为 每个单元格 行 需要显示内容 将传递给的参数onmouseover当用户将鼠标移动到显示
  • 导航栏折叠在 Bootstrap 中不起作用

    Bhanu pratap 解决了这个问题 在这个问题的末尾检查一下 我一直在遵循旧的路线来构建导航栏折叠 三明治 问题是课程中的页面顶部似乎有一个黑条 并且缩小页面时会出现导航栏 对我来说 我只需在左侧找到一个按钮 另外 当我缩小页面时 我
  • 使用JQuery检查元素是否有边框?

    所以我正在玩 el css 尝试确定元素是否有边框 我用 css border style solid 设置边框 这是可行的 但实际上它设置了 4 种单独的样式 border right style border left style bo
  • javascript中输入类型时间的值

    我有这个html
  • 如何使用CSS将背景图像放入选择选项标签中

    我有一个从 json 响应接收的国家 地区下拉列表 并且想要在国家 地区名称旁边添加相应的国家 地区国旗图标 也从 json 响应获取图像 我已经尝试了不同的 jQuery 和 bootstrap 插件 但他们所做的是破坏我以前的选择框样式
  • 水平平滑滚动 100px

    Heyjo problem 一周以来我一直在寻找 javascript 或 jQuery 代码 以便在我的网站上实现滚动按钮 我失败的那一刻是按钮应该多次工作的时候 他的任务不是滚动到专用元素 而是应该向左滚动 例如 100px 此外 滚动
  • 自定义 WP 主题时,我应该将导航栏放在“”标签之前还是之后?

    我正在通过制作子主题来自定义 WP 主题 我将 Bootstrap 中的导航栏放入子主题目录中的 header php 文件中 但是 我不确定在哪里放置导航栏代码 我可以把它都放在前面and之后标记成功 例如 无论我选择哪一个 导航栏都显示
  • 将 div 文本分配给变量然后显示它

    我有一个简单的任务 我试图完成学习 JavaScript 但一直无法找到明确的答案 这是代码 div Testing div 基本上我希望将方框 div 中的文本存储到变量中 然后 我想在页面的不同部分显示该变量的文本 使用上面的代码我得到
  • 如何解决此错误:属性 rel 的原始源值错误

    我正在尝试使用 w3c 验证我的网站 但出现错误 Bad value original source for attribute rel on element link The string original source is not a

随机推荐