Tizen wearable web app popup button image not showing

Question

I'm designing a web app with some popup buttons and the functionality is working fine but the buttons are displaying empty.

I've placed 2 x png files in a folder named 'images', ok.png and cancel.png.

The code i'm using from the Tizen tutorial is below;

https://developer.tizen.org/ko/development/guides/web-application/user-interface/tizen-advanced-ui/applications-circular-ui/creating-popup-buttons

<div class="ui-page ui-page-active" id="main">
    <div class="ui-content">
        <a href="#sideBtnPopup" class="ui-btn" data-rel="popup" id='testPopup'>Test popup</a>
        <li><p id="okOutput"></p></li>
        <li><p id="cancelOutput"></p></li>
    </div>
    <style>
        .btn-icon-cancel::before {-webkit-mask-image: url(./images/cancel.png)}
        .btn-icon-ok::before {-webkit-mask-image: url(./images/ok.png)}
    </style>
    <div id="sideBtnPopup" class="ui-popup">
        <div class="ui-popup-content">
          Press as passing boat or pin
        </div>
        <div class="ui-popup-footer ui-grid-col-2 ui-side-button">
            <button class="ui-btn btn-icon-cancel btn-cancel" id="sideBtn-1" onclick="cancelButton()">Cancel</button>
            <button class="ui-btn btn-icon-ok" id="sideBtn-2" onclick="okButton()">OK</button>
        </div>
    </div>
    <script>
    function okButton() {
        document.getElementById("okOutput").innerHTML = "Ok Pressed";
        tau.closePopup();
    }

    function cancelButton() {
        document.getElementById("cancelOutput").innerHTML = "Cancel Pressed";
        tau.closePopup();
    }
    </script>
</div>

I've tried moving the css code into the css file. I've also tried a few other things to set the url of the image, I've tried resizing the image down to the size of the button but no luck.

To be clear, the buttons work fine but the images don't display in the buttons, they are simply blue ovals with black background.

Any help would be greatly appreciated.

Answer 1

If You want to use -webkit-mask-image You need to set background-color and -webkit-mask-size as well.

Just update your <style> tag to following:

<style>
    .btn-icon-cancel::before {
        -webkit-mask-image: url(./images/cancel.png);
        -webkit-mask-size: 100%;
        background-color: #fff;
    }

    .btn-icon-ok::before {
        -webkit-mask-image: url(./images/ok.png);
        -webkit-mask-size: 100%;
        background-color: #fff;
    }
</style>

replacing #fff with desired icon color.