Following up from this. I have a B&W PNG image in my iOS app's resources. I'm using it in a piece of generated HTML, which is displayed in a WKWebView:
[MyWebView loadHTMLString: TheHTML baseURL: NSBundle.mainBundle.resourceURL];
When I designate the image as the background, it loads and displays as expected:
.x {
display:inline-block;
background-image:url(r.png);
width:24px;
height:24px;
}
When I designate the very same image as the mask, the element appears blank as if there's no mask:
.x {
display:inline-block;
-webkit-mask: url(r.png);
mask: url(r.png);
width:24px;
height:24px;
background-color:#000000;
}
If I save the content as an HTML file, place it into a Web folder along with CSS and the image, and load using mobile Safari, the mask works as expected. From that I conclude that the slyle itself is otherwise okay.
When I connect to WKWebView in the simulator with the Safari inspector, and then load the page, I get a CORS error message in the console:
Failed to load resource: Origin null is not allowed by Access-Control-Allow-Origin.
Should't files the the app resource folder count at the same origin as the HTML string? I have no problem loading JavaScript and other images from the resource folder.
Lifted a trick from here:
[MyWebView.configuration.preferences setValue: @YES forKey:@"allowFileAccessFromFileURLs"];
This isn't exactly a duplicate because the other question deals with XHR. What's new in this one is the fact that WKWebView treats mask images in the filesystem differently than stylesheets, backgrounds, and scripts.
Tested on iOS 9..13.
UPDATE: throws an NSUnknownKeyException on iOS 8.x! Haven't reproduced it, but I'm seeing crash reports to that effect.