CSS 变量 url 后备相对路径在 Safari 中与其他浏览器不同答案

【问题标题】：CSS variable url fallback relative path different in Safari to other browsersCSS 变量 url 后备相对路径在 Safari 中与其他浏览器不同
【发布时间】：2021-03-19 19:09:46
【问题描述】：

我遇到的问题是我正在使用带有大量 css 变量的 css 文件来替换背景和颜色。在 Safari 中，后备 URL 的路径会中断。

背景图片:var(--somevar, url(../imgs/background.jpg));在我的 css/base.css 中，将评估相对于 Chrome 中的 css 文件和相对于 Safari 中的 HTML 的回退。

chrome 中的文件夹/myapp/imgs/background.jpg 与 Safari 中的文件夹/myapp/background.jpg

我已在此处对该问题进行了回购：https://github.com/warlockuk/safarivarurl

绝对路径目前不是一个选项，因为我们有反向代理和其他指向内容的东西，所以一切都必须是相对的：/

有什么想法吗？

【问题讨论】：

小更新作为一种解决方法：我已经制作了导致最大问题的 Vue 项目，它将其 css 构建到与 html 相同的位置；这掩盖了后备 CSS 的浏览器根目录之间的差异。仍然不理想。

标签： css url safari background-image var

【解决方案1】：

/* Only for Safari  for logo url relative path problem */

@media screen and (-webkit-min-device-pixel-ratio:0) {
    :root {
        --logo: url(/img/logo_50_50_color.svg); /*(add your relative URL)*/
    }

    .logo {

        background-image: var(--logo);

    }

}

<div class="logo">

load relative url in safari

</div>

【讨论】：