WKWebView 中的蒙版图像受 CORS 限制

Question

跟进 this。我的 iOS 应用程序资源中有一张黑白 PNG 图像。我在一块生成的 HTML 中使用它，它显示在 WKWebView:

[MyWebView loadHTMLString: TheHTML baseURL: NSBundle.mainBundle.resourceURL];

当我将图像指定为背景时，它会按预期加载和显示：

.x {
display:inline-block;
background-image:url(r.png);
width:24px;
height:24px;
}

当我将完全相同的图像 指定为蒙版时 ，该元素显示为空白，就好像没有蒙版一样：

.x {
display:inline-block;
-webkit-mask: url(r.png);
mask: url(r.png);
width:24px;
height:24px;
background-color:#000000;
}

如果我将内容保存为 HTML 文件，将其与 CSS 和图像一起放入 Web 文件夹，并使用移动版 Safari 加载，蒙版会按预期工作。由此我得出结论，slyle 本身还可以。

当我使用 Safari 检查器连接到模拟器中的 WKWebView，然后加载页面时，我在控制台中收到一条 CORS 错误消息：

Failed to load resource: Origin null is not allowed by Access-Control-Allow-Origin.

应用程序资源文件夹中的文件不应与 HTML 字符串同源计数吗？我从资源文件夹加载 JavaScript 和其他图像没问题。

Answer 1

举起了的技巧：

[MyWebView.configuration.preferences setValue: @YES forKey:@"allowFileAccessFromFileURLs"];

这并不完全重复，因为另一个问题涉及 XHR。这其中的新内容是 WKWebView 在文件系统中对待掩码图像的方式不同于样式表、背景和脚本。

测试于 iOS 9..13.

更新：在 iOS 8.x 上抛出 NSUnknownKeyException！还没有复制它，但我看到了这方面的崩溃报告。

Mask image in WKWebView subject to CORS limitations