CSS Safari 上的背景图像相对路径 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 上加载时没有任何问题，有什么想法吗？

检查时间：

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

编辑：

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

Answer 1

这似乎是一个 Safari 错误 - 在 IOS Safari (14.4) 中也可以看到。

我能找到的唯一解决方法是使用 background-image 语句

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

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

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

Answer 2

我只是运行遇到了这个完全相同的错误。谢谢你把它写下来！

为了它的价值，我在我的 .htaccess 文件中添加了一个重定向规则作为一个愚蠢但有效的解决方法：

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

这会将带有无效前缀的 images/bg_XXX.png 的所有请求重定向到位于 real/path/images/bg_XXX.png 的正确路径。

CSS background-image relative path var() on Safari not loading image