javascript - Chrome 通过 URL 显示所有与自定义属性相关的媒体，但 Safari 不加载它们

Question

当您将自定义属性与 background-image 一起使用时 - Safari 会以另一种方式解释图像的 url，例如:

Chrome 显示所有图像，但 Safari 记录“不允许加载本地资源”

另一个例子: Chrome 不显示所有图像，但 Safari 运行良好

问题是方向，我不知道为什么但是当你使用自定义属性并为背景图像设置 url 时 - safari 在文件路径中添加一个步骤，换句话说添加“。”

我试图解决这个问题，只为 Safari 创建另一个带有自定义 Prop 的文档，当 JS 检测到 Safari 时，它会切换带有自定义 Prop 的 css 文档，但它也不能正常工作，因为 safari 开始显示图像 - dat's很酷，但是当我打开暗模式时它不会刷新新的新图像(这就是我开始全部的原因)

另外，你可以在这里找到很好的例子:https://github.com/rudensergey/testChromeSafari

我的元素，我遇到了这个问题:https://github.com/rudensergey/darkroom

我期待接下来:我有带有图像的伪对象(我将它们设置为带有 URL 的背景图像)，而不是背景图像的 URL 我使用自定义 Prop var(--pucture) 例如

在那之后，当我想将我的网站切换到深色主题时，JS 重写了自定义属性 () 并将新图像应用于网页，但是......

Answer 1

我把你的 :root 改成了这样:

:root {
    /* Images are in the same directory */

    /* this path works in Chrome */
    --path-to-image-one: url(../media/1.png);
    /* this path works in Safari */
    --path-to-image-two: url(../media/2.jpg);
}

它对我都有效——见屏幕截图