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.
