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 图标错误地呈现白色背景 的相关文章

  • 文本输入框作为 SVG 中的“foreignObject” - 文本溢出问题

    我使用 foreignObject 标签在 svg 中有一个文本输入框 这很有效 但是如果您在输入框中输入的内容比其宽度长 从而导致其溢出 那么文本实际上会出现在页面上的其他位置 可能是没有外来对象标记的默认位置 这是一些屏幕截图来解释正在
  • 背景 CSS 图像仅在 IE7 中不显示

    html 是 div class choose os p a href someLink class windows Microsoft Windows a a href someOtherLink class macos Apple Ma
  • Bootstrap 手风琴菜单不起作用

    我设计了一个如图所示的手风琴菜单 如果单击菜单 打开的菜单将关闭 这就是手风琴的功能 但在这个设计中 我逐个单击菜单 但前一个没有关闭 如何解决这个问题 提前致谢 jQuery document ready function var acc
  • 无法删除重叠的框阴影

    更具体地说 我使用的是聚合物纸影 我正在尝试删除一个的两侧paper shadowbox 来创建一个简单的箭头框 但我似乎无法摆脱它 我试过删除position absolute 但这似乎并没有消除重叠的行为 这是我的 html css 的
  • 为什么我在 div 上看不到我的背景

    我有一个容器 并且在它的子 div 内有 float left 问题是 一旦我在子 div 上应用 float left 我的父 div 的背景就完全丢失了 div style background CCC width 100 div Th
  • Chrome DevTools:计算样式与 css 规则不同?

    当我在 CSS 文件中定义 4px 时 我的 DOM 元素的 border top width 怎么可能是 0px 当我使用 Chrome DevTools 检查元素时 我发现计算的样式告诉 0px 而最上面的 css 规则是 4px 而且
  • 在每个打印页上重复水印? JavaScript 或 CSS

    所以 我有这个发票页面 我正在页面后面添加水印 我需要为要打印的每一页重复水印 问题是 我不知道会有多少页 可以有任意数量的页面 我需要在每个页面后面显示水印 这些图像取自 Google Chrome 的打印模式 这是该页面的 html 你
  • 阻止表单 POSTing,直到 javascript 代码得到满足

    每当我点击提交按钮时它就会触发alert empty username 但直接引导我去checklogin php 我怎样才能避免这种情况并让它保留在页面上 除非该字段不为空 function RequiredFields var user
  • 将单选按钮放置在图像上

    我试图在图像上的确切位置放置一些单选按钮 我已将两者都放在 Div 中 但我不知道下一步该怎么做 这是我想要放置单选按钮的位置 红色圆圈 到目前为止 这是我的代码 center display block margin left auto
  • 为什么 Flexbox 会拉伸我的图像而不是保留纵横比?

    Flexbox 具有这种行为 它将图像拉伸到其自然高度 换句话说 如果我有一个带有子图像的 Flexbox 容器 并且我调整了该图像的宽度 则高度根本不会调整大小 并且图像会被拉伸 div display flex flex wrap wr
  • 禁用输入中的空格,并允许后退箭头?

    我试图禁用用户名文本字段中的空格 但是我的代码也禁用后退箭头 有什么办法也允许后退箭头吗 function var txt input UserName var func function txt val txt val replace s
  • 如何将div内容添加到jspdf中的新页面?

    如何将div内容添加到jspdf中的新页面 我尝试使用 br 它创建了一个新页面 但我看不到内容 div div style margin 3px 430px First Page div div Place content to Seco
  • 用不同的颜色为 Google 热图着色

    我试图开发一个遵循 Google Map API 的热度 https developers google com maps documentation javascript examples layer heatmap https deve
  • 如何修复网站 iframe 错误?

    当我访问此网址时 警告 推荐使用一些广告拦截器 网页链接加载良好 没有错误 但是 当我尝试通过加载同一页面时iframe在我的html代码中 出现错误 我的html代码
  • 使用 bootstrap 将搜索图标放入文本框中

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

    我在使用 Javascript 时遇到了一个奇怪的问题 我得到的是一个特定格式的字符串 我将尝试用它创建一个表 该表每行只有一个单元格 字符串的格式为 每个单元格 行 需要显示内容 将传递给的参数onmouseover当用户将鼠标移动到显示
  • 自定义 WP 主题时,我应该将导航栏放在“”标签之前还是之后?

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

    好的 我有一个小菜单栏 菜单内的三个元素还有更多的子菜单 但是菜单栏中的元素之间有不必要的间距 而且我创建的子菜单有不必要的背景宽度 我在代码中将其涂成白色以使读者理解 由于这种不必要的宽度 即使鼠标悬停在不可见的宽度上 在本例中为白色 本
  • 为什么字体扩展仅适用于 PDF,而不适用于其他格式(HTML、XLS、DOC)?

    通过 Jaspersoft Studio 我们使用以下设置将用于 Web 应用程序的内置 Windows Calibri 字体变体导出到字体扩展 JAR 中 导出的jrfontextensions jar内的目录结构如下 jrfontext
  • 如何解决此错误:属性 rel 的原始源值错误

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

随机推荐