Google Map radius corner

Question

The webkit-mask-image mask moves when you scrolling the page

body{
    height:1500px;
}

#wrapper {
    margin-top:250px;
    width: 300px; 
    height: 300px;
    border-radius: 100px;
    overflow: hidden;
    position: absolute; /* this breaks the overflow:hidden in Chrome/Opera */
    -webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC); /* this fixes the overflow:hidden in Chrome/Opera */
}

#map1 { 
    width: 300px; 
    height: 300px;

}

How to make the webkit-mask-image static? Thanks

Duplicate : http://stackoverflow.com/questions/18792402/css-webkit-mask-image — Milche Patern, Sep 16 '13 at 19:48
See my answer here http://stackoverflow.com/a/18836164/1477388 — user1477388, Sep 16 '13 at 20:01

Praveen · Answer 1 · 2013-08-28T05:21:26.440

1

As per my understanding, you don't want to move the Google maps on scroll(static).

In CSS, it is called as fixed positioning.

position: fixed

Check this JSFiddle

edited Aug 28 '13 at 05:21

answered Aug 28 '13 at 05:12

Praveen

55,303
33
133
164

the supplied JsFiddle is the same as the original of the Question. – Bart Calixto Aug 28 '13 at 05:15
@Bart Oops. Forget to update it. check this http://jsfiddle.net/DZTvR/1/ Thanks for pointing it. – Praveen Aug 28 '13 at 05:21
Thanks! but if you have some elements are shown on the page as well, position fixed is not a solution – olo Aug 28 '13 at 10:37

score 1 · Answer 2 · answered Sep 16 '13 at 19:59

1

Replace your data with an image-file url

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

answered Sep 16 '13 at 19:59

Milche Patern

19,632
6
35
52

Google Map radius corner

2 Answers2

Linked