google mapをcssで丸に切り抜く方法

CSS on 12 Jan , 2016

map-image

google mapをcssで丸に切り抜きたかったので試しました。
当然以下のcssコードで行けると思ってました、ええ。


#map_canvas{
width: 400px;
height: 400px;
overflow:hidden;
border-radius: 200px;
}

chromeや、ieだとコレで問題なく丸に表示されるのですが
何故かsafariだと四角のまま。。。


#map_canvas{
width: 400px;
height: 400px;
overflow:hidden;
border-radius: 200px;
-webkit-transform: translateZ(0);
-webkit-mask-image: -webkit-radial-gradient(circle, white, black);
}

いろいろ調べた結果ですが
上記でうまく表示されるようになりました。

-webkit-transform: translateZ(0);

コレに関してはcssアニメーションをスムーズにするためのハードウェア・アクセラレーション用ハックに使われるようですがなぜ影響するのかはよくわかりません。。

-webkit-mask-image: -webkit-radial-gradient(circle, white, black);

これは、webkit系でサポートしている「マスク機能」のためのcssです。
マップのボックス対し円上のマスクをかけたということになります。

以上cssメモでした