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).

You can use [`-webkit-mask-attachment`](http://css-infos.net/property/-webkit-mask-attachment) but it's only for Safari v4 and above :( — Adrift, Sep 13 '13 at 18:06
In gChrome, when i disable then re-enable the .-webkit-mask-image property, the layout comes back in place. Can you try your masking with an image-file instead of a data:image/png;base64 ?? — Milche Patern, Sep 16 '13 at 19:44
Duplicate : http://stackoverflow.com/questions/18478364/google-map-radius-corner — Milche Patern, Sep 16 '13 at 19:48

score 11 · Accepted Answer · edited May 23 '17 at 11:53

11

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.

enter image description here

Edit:

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

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

edited May 23 '17 at 11:53

Community

1
1

answered Sep 16 '13 at 19:52

user1477388

20,790
32
144
264

3

Maybe your answer is applicable to http://stackoverflow.com/questions/18478364/google-map-radius-corner – Milche Patern Sep 16 '13 at 19:57
Yeah I should probably post it there, too; or at least a link back here from there. Thanks. – user1477388 Sep 16 '13 at 19:59
@user1477388 This looks better, but if you scroll, you'll notice the background image move behind the clip window. – Andy Hin Sep 23 '13 at 15:26
@AndyHin What browser are you experiencing this in? I don't notice anything like that in Chrome. – user1477388 Sep 23 '13 at 15:41
@user1477388 I'm seeing this in chrome. See the following: http://www.gifsicle.com/gif/6d6ecb0 notice how the the clip window shifts and starts cutting off more and more of the bottom of the image. Also, will this solution work for dynamic image sizes? – Andy Hin Sep 23 '13 at 18:32
I see the effect you are talking about. I don't know how it can be fixed since I'm not that familiar with using masks. As to dynamic sizes, this depends on a specifically sized PNG. This may be a better solution http://stackoverflow.com/questions/4579330/is-there-any-trick-to-put-rounded-corners-on-a-google-map – user1477388 Sep 23 '13 at 19:21
-moz-mask-image doesn't exist – Leo May 01 '14 at 05:33

Milche Patern · Answer 2 · 2013-09-19T13:12:06.453

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.

score 0 · Answer 3 · answered Sep 22 '13 at 08:58

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.

CSS: -webkit-mask-image

3 Answers3

Linked