CSS: -webkit-mask-image

Question

I'm using the CSS property

-webkit-mask-image

To apply a mask over an image. However, in chrome, the mask moves as you scroll the image off the page.

How do you prevent the mask from moving? Or is it a rendering artifact?

JSFiddle: http://jsfiddle.net/DZTvR/ (Scroll down on the frame with the map in it).

Answer 1

You'll have to resize the .png but this seems to work for me:

-webkit-mask-image: url(http://s21.postimg.org/gfep7h1h3/trans_Test.png);
-o-mask-image: url(http://s21.postimg.org/gfep7h1h3/trans_Test.png);
-moz-mask-image: url(http://s21.postimg.org/gfep7h1h3/trans_Test.png);
mask-image: url(http://s21.postimg.org/gfep7h1h3/trans_Test.png);

http://jsfiddle.net/DZTvR/13/

This should also degrade gracefully for IE <= 8.

Edit:

This is a better answer: https://stackoverflow.com/a/4579617/1477388

Example: http://search.missouristate.edu/map/mobile/examples/corners.htm