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 o

Answer 1

Replace your data with an image-file url

-webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC);

About your situation, there is this issue on chromium reported by mihaip@chromium.org, Aug 26, 2013 : http://code.google.com/p/chromium/issues/detail?id=279319 and this one about similar subject http://code.google.com/p/chromium/issues/detail?id=99052

For complement of info : -webkit-mask-attachment: No more supported in Chrome 24 and later. Supported in Safari 4.0.

Answer 2

If I'm understanding your question correctly... You should be able to use SVG clip-path and then position your wrapper div however you like.

Working Example

body {
    height: 1800px;
}
#wrapper {
    position:absolute;
    top:100px;
    left:100px;
}
#map1 {
    width: 251px;
    height: 254px;
    -webkit-clip-path: url(#clipping);
    clip-path: url(#clipping);
}
svg {
    height:0;
}

<div id="wrapper">
    <div id="map1"></div>
</div>
<svg>
    <defs>
        <clipPath id="clipping">
            <polygon points="100,10 40,180 190,60 10,60 160,180" />
        </clipPath>
    </defs>
</svg>

Tested and working in Firefox and Chrome.

Answer 3

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