Search code examples
htmlcsssvgsafariwebkit

Button with CSS SVG background image does not show up on Safari/Webkit IOS or MacOS

I am using IIS10 to serve web pages and ASP.NET Webforms. I have an HTML page with a series of toolbar buttons. These buttons have masked CSS backgrounds in SVG to present toolbar icons.

Buttons render as expected in Windows Edge (Chromium), Chrome, etc., as well as on Chrome on MacOS. However, on MacOS Safari, WebKit pages in apps and iOS Safari and apps, the buttons render no image. I checked the MIME type per the SVG in CSS backgrounds not showing up in Safari link, and it is properly set to image/svg+xml for the svg file extension. An example is shown below:

HTML:

    <button id="print" class="toolbarButton print hiddenMediumView" title="Print" tabindex="33" data-l10n-id="print">
        <span data-l10n-id="print_label">Print</span>
    </button>

CSS:

.toolbarButton.print::before {
    -webkit-mask-image: url(images/toolbarButton-print.svg);
    -webkit-mask-image: var(--toolbarButton-print-icon);
    mask-image: url(images/toolbarButton-print.svg);
    mask-image: var(--toolbarButton-print-icon);
}
[snip]
--toolbarButton-print-icon: url(images/toolbarButton-print.svg);

Has anyone run into this and if so, is there a solution?

Thanks!!!

Solution

  • The problem was in the duplicate -webkit-mask-image CSS tags, one with the url, and the other with a var pointing to the url.

    The fix was to remove the second -webkit-mask-image with the var -- the masks then worked perfectly.