Safari 上的 CSS 背景图像相对路径 var() 不加载图像

Question

不确定是否有人遇到过这个问题（我见过类似的问题，但不完全一样），但是在 Mac OSX Safari 浏览器上，当您使用变量作为背景图像的相对图像位置时，会发生以下问题，它不会加载

:root {
  --lb3-widget-icon: url(../../images/logo-icon2.png);
}
.image-area {
  background-image: var(--lb3-widget-icon);
}

这是一个存在该问题的项目示例： https://codepen.io/alexbernotas/pen/dypLKvR

如您所见，左上角蓝色区域上方的图像未加载，但在 Firefox 和 Chrome 上加载没有任何问题，有什么想法吗？

已检查：

• Mac 操作系统 11.2.1
• Safari 14.0.3

我知道如果您使用完整的图像路径 URI 那么它会工作，但我需要让它与相对文件路径一起工作

---

编辑：

一个更简单的例子： https://codepen.io/alexbernotas/pen/abpbVeG

Answer 1

这似乎是 Safari 的错误 - 在 IOS Safari (14.4) 中也可见。

我能找到的唯一解决方法是使用背景图像声明

background-image: var(--lb3-widget-icon);

在主代码文件中的样式元素中（将 png 定位在正确的相对位置）- var 仍然可以在 css 文件中设置。

这显然不理想，但确实意味着您仍然可以使用具有相对文件夹路径的 CSS 变量来选择图像，尽管这意味着图像文件夹必须移动。

Answer 2

我刚刚遇到了这个完全相同的错误。谢谢你写下来！

无论如何，我在我的

.htaccess

文件中添加了一条重定向规则，作为一种愚蠢但有效的解决方法：

RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^.*/(images/bg_.+\.png) real/path/$1 [L,QSA]

这会将所有带有无效前缀的

images/bg_XXX.png

请求重定向到

real/path/images/bg_XXX.png

处的正确路径。

Answer 3

看起来这个特定问题已在最新的 Safari 上得到解决，但是 Safari 计算路径的方式仍然存在问题（实际上更多的是意见分歧），这给我带来了问题，并且阻止了已接受的解决方案的工作我。

就我而言，我有一个包含用户自己的徽标的自定义 .css。它位于

mywebsite.com/css/application/custom/<userid>/

。它包含这个：

--bannerimage: transparent url(../../../images/application/custom/<userid>/logo.png) top left;

此变量由

mywebsite.com/css/application/something/somecss.css

中不同级别的 css 使用。

除 Safari 之外的所有浏览器都会拾取

mywebsite.com/images/application/custom/<userid>/logo.png

中的徽标。在 Safari 上，它会尝试加载文件

mywebsite.com/css/images/application/custom/204107/logo.png

。如果我在路径中添加额外的 ../，那么它可以在 Safari 上运行，但不能在其他浏览器上运行。

发生的事情似乎是 Safari 正在确定相对于定义变量的 CSS 的路径。在 Chromium 和其他浏览器中，它确定相对于使用变量的 CSS 的路径。

有两种解决方案：

1. 将两个 CSS 文件存储在同一级别。

2. 使用Safari特定样式来更正路径。

Safari 特定样式解决方案对我有用：

:root {
  --bannerimage: transparent url(../../../images/application/custom/<userid>/logo.png) top left;
}
    
@supports (font: -apple-system-body) and (-webkit-appearance: none) {
    :root {
        --bannerimage: transparent url(../../../../images/application/custom/<userid>/logo.png) top left;
  }
}

另请参阅此问题了解 Safari 特定样式： 有没有办法只将样式应用于 Safari？

希望这有帮助