Прозрачные закругленные углы на Google Map

Question

Мне нужно сделать мою карту Google V3 полным кругом. Я использую радиус рамки CSS3, но он работает правильно только в Firfox, другие просто оставляют его прямоугольным. Вот коды:

<div class="map mapCircle" style="position: relative; background-color: transparent; overflow: hidden;">
    <div style="position: absolute; left: 0px; top: 0px; overflow: hidden; width: 100%; height: 100%; z-index: 0;">
        <div style="position: absolute; left: 0px; top: 0px; overflow: hidden; width: 100%; height: 100%;">
            ...
        </div>
    </div>
</div>

и CSS:

.map.mapCircle {
    width: 476px;
    height: 476px;
}
.mapCircle>div>div:first-child {
    -moz-border-radius: 238px;
    -webkit-border-radius: 238px;
    border-radius: 238px;
}

Да, я знаю, я мог бы использовать несколько наложенных изображений с цветом фона. Но настоящая проблема в том, что фон не только цветной. Он изменяется в зависимости от его содержания и обычно является градиентом. Есть ли способ заставить Chrome и другие браузеры на основе wabkit и Opera (у меня нет никаких надежд на IE) отображать его так же, как FF?

Мой сайт. Посмотрите в самый конец страницы.

UPD: только что протестирован в IE9, и он отображается нормально. Что не так с webkit и Opera?

UPD 2: Я использовал andwer OverZealous и понял, что он работает только в Safari. Chrome собирает только маски PNG, Opera вообще не является webkit. Нужны еще идеи

Answer 1

Возможно, вы столкнулись с той же ошибкой Webkit, что и здесь: Закругленные углы не могут обрезать контент в браузерах Webkit, если позиция: относительная

Также здесь: Проблемы с ограничением радиуса границы CSS3

Я проверил это (через отладчик), изменив код, добавив видимую границу к узлу с радиусом границы, а затем скрыл содержимое.Это ясно показало круг для внешнего элемента.Поскольку Webkit используется и в Safari, и в Chrome, это объясняет это.Однако, когда я тестировал его в Opera, мне кажется, что я вижу ту же ошибку.

Теперь, некоторые хорошие новости: вы могли бы заставить Webkit вести себя, используя -webkit-mask и кружок SVG.На этой странице есть пример: http://www.webkit.org/blog/181/css-masks/

Это поможет вам получить поддержку в Firefox, Safari и (надеюсь) Chrome.(И, очевидно, IE9, так как вы только что протестировали его!) Что, по всем показателям, является лучшим из того, что вы обычно можете надеяться достичь для хаков CSS3.; -)