Search code examples
htmlcsscss-mask

Chrome not rendering CSS mask-image consistently

I've run into a strange issue where chrome isn't applying some images consistently with masks. (one image works as expected, whereas the other does not and renders the entire div). Both images work as expected in Firefox (when the webkit prefix is removed).

In the code pen below, it starts with a base 64 encoded image (a cat), that masks the div correctly, after 3 seconds a set timeout changes the mask to a heart image. This mask does not apply as expected. To prove that it is a valid image, I apply the image as a background-image 3 seconds later (successfully).

let heartUri = 'url(data:image/png;base64,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)'

  setTimeout(() => {
      document.getElementById('luminance-target').style['-webkit-mask-image'] = heartUri
  }, 3000)
  setTimeout(() => {
       document.getElementById('luminance-target').style['background-image'] = heartUri
  }, 6000)
 
#luminance-target {
  display: block;
  background-color: yellow;
  -webkit-mask-image: url('data:image/png;base64,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');
  -webkit-mask-mode: luminance;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: 100%;
  width: 300px;
  height: 300px;
}
  <div id="luminance-target">
    <h2>Luminance Mask</h2>
  </div>

https://codepen.io/anon/pen/PXYgNg

Is this expected behaviour?

Solution

  • Chrome’s implementation of CSS masks is still incomplete. At this stage, it does not support the luminance mode:

    Chrome devtools

    The default mode is alpha. Since your cat image has a transparent background, this works fine. Your heart image on the other hand, does not.

    The demo below starts with your cat image, then transitions to your original heart before finishing on the same heart but with transparency applied.

    To avoid the painful data URLs, I added imgur links for the images.

    Cat: https://i.sstatic.net/rnXYp.png
    Old Heart: https://i.sstatic.net/nbLhD.png
    New Heart: https://i.sstatic.net/JnFrp.png

    let heartUri = 'url(\'https://i.sstatic.net/nbLhD.png\')';
let newHeartUri = 'url(\'https://i.sstatic.net/JnFrp.png\')'

 setTimeout(() => {
     document.getElementById('luminance-target').style['-webkit-mask-image'] = heartUri;
 }, 3000);

 setTimeout(() => {
     document.getElementById('luminance-target').style['-webkit-mask-image'] = newHeartUri;
 }, 6000);
 
    #luminance-target {
  display: block;
  background-color: yellow;
  -webkit-mask-image: url('https://i.sstatic.net/rnXYp.png');
  -webkit-mask-mode: alpha;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: 100%;
  width: 300px;
  height: 300px;
}
    <div id="luminance-target">
    <h2>Luminance Mask</h2>
</div>