Angoli arrotondati trasparenti su Google Map

Devo fare del mio google map V3 un giro completo. Uso il raggio del bordo CSS3 su di esso, ma funziona correttamente solo in Firfox, altri lo lasciano semplicemente rettangular. Ecco i codici:

...

e CSS:

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

Sì, lo so, potrei usare alcune immagini di sovrapposizione con il colore di sfondo. Ma il vero problema è che lo sfondo non è solo -colore. Cambia in base al suo contenuto e solitamente è un gradiente. C’è un modo per rendere Chrome e altri browser basati su wabkit e Opera (non ho alcuna speranza su IE) per renderlo come FF?

Il mio sito. Guarda fino in fondo alla pagina.

UPD: appena testato in IE9, e rende OK. Cosa c’è di sbagliato con il webkit e Opera?

UPD 2: Ho usato OverWealous’s andwer e ho capito che funziona solo in Safari. Chrome assegna solo le maschere PNG, Opera non è affatto webkit. Sono necessarie altre idee

Sembra che si stia verificando lo stesso bug di Webkit come notato qui: Gli angoli arrotondati non riescono a tagliare il contenuto nei browser webkit se posizione: relativa

Anche qui: problemi di clipping border-radius CSS3

Ho provato questo (tramite un debugger) modificando il codice per aggiungere un bordo visibile al nodo con il raggio del bordo, quindi nascondo il contenuto. Ha mostrato chiaramente un cerchio per l’elemento esterno. Poiché Webkit è utilizzato sia in Safari sia in Chrome, ciò spiegherebbe quelli. Tuttavia, quando lo collaudo all’interno di Opera, mi sembra di vedere lo stesso bug.

Ora, alcune buone notizie: potresti essere in grado di far si che Webkit si comporti usando -webkit-mask e un cerchio SVG. C’è un esempio in questa pagina: http://www.webkit.org/blog/181/css-masks/

Questo ti aiuterà a utilizzare Firefox, Safari e (si spera) Chrome. (E apparentemente IE9, dato che l’hai appena testato!) Che, per tutti i conti, è il meglio che puoi sperare di ottenere per gli hack CSS3. 😉