如何解决带有 CSS SVG 背景图像的按钮不会在 Safari/Webkit IOS 或 MacOS 上显示
我使用 IIS10 来提供网页和 ASP.NET Webforms。我有一个带有一系列工具栏按钮的 HTML 页面。这些按钮在 SVG 中屏蔽了 CSS 背景以显示工具栏图标。
按钮在 Windows Edge (Chromium)、Chrome 等以及 MacOS 上的 Chrome 中按预期呈现。但是,在 MacOS Safari、应用程序中的 WebKit 页面以及 iOS Safari 和应用程序上,按钮不呈现图像。我根据 SVG in CSS backgrounds not showing up in Safari 链接检查了 MIME 类型,并将其正确设置为 image/svg+xml 以获取 svg 文件扩展名。一个例子如下所示:
HTML:
<button id="print" class="toolbarButton print hiddenMediumView" title="Print" tabindex="33" data-l10n-id="print">
<span data-l10n-id="print_label">Print</span>
</button>
CSS:
.toolbarButton.print::before {
-webkit-mask-image: url(images/toolbarButton-print.svg);
-webkit-mask-image: var(--toolbarButton-print-icon);
mask-image: url(images/toolbarButton-print.svg);
mask-image: var(--toolbarButton-print-icon);
}
[snip]
--toolbarButton-print-icon: url(images/toolbarButton-print.svg);
有没有人遇到过这种情况,如果有,有解决方案吗?
谢谢!!!
解决方法
问题出在重复的 -webkit-mask-image
CSS 标签中,一个带有 url
,另一个带有指向 var
的 url
。
修复方法是删除带有 -webkit-mask-image
的第二个 var
——然后遮罩完美运行。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。