CSS border-radius en iFrame incrustación de google maps, no funciona

Tengo un botón en mi sitio, al hacer clic se mostrará u ocultará un mapa de google div (incrustado con iframe). Funciona bien, excepto que border-radius solo funciona durante jquery animate. Una vez que se realiza la animación, el iframe se convierte en cuadrado.

Configuré una demostración jsFiddle

HTML

Javascript

 $(function () { $("button").on("click", function () { if(parseInt($("#moreInfo").css("opacity"))) { $("button").text("Show"); $("#moreInfo").css({opacity:1,top:0,height:200,display:'inline'}); $("#moreInfo").animate({opacity: 0,top: 100,height: 100}, 100, function () {$("#moreInfo").hide();}); } else { $("button").text("Hide"); $("#moreInfo").css({opacity:0,top:100,height:100,display:'inline'}); $("#moreInfo").show(); $("#moreInfo").animate({opacity: 1,top: 0,height: 200}, 100); } }); }); 

CSS

 #moreInfo { position: absolute; opacity: 0; top: 0px; left: 10px; width: 300px; height: 200px; background-color: blue; border-radius: 50%; } #layer-2 { height: 200px; } body { background-color: #aaa; } 

Nota: Por favor, no marque este duplicado, he pasado por varias respuestas de desbordamiento de stack, pero ninguna de ellas me ayudó. Además, por favor, no sugiera ninguna otra integración de api de Google Maps, necesito usar la implementación de iFrame.

Funciona, debe usar overflow: hidden; para el elemento span medida que su iframe desborda del elemento span , y como no tiene border-radius aplicado en el iframe, se representa como un bloque rectangular …

 #moreInfo { position: absolute; opacity: 0; top: 0px; left: 10px; width: 300px; height: 200px; background-color: blue; border-radius: 50%; overflow: hidden; } 

Manifestación


Si no desea utilizar el overflow: hidden; para el padre, que también usa el border-radius del border-radius para el iframe … y se deshace del blue fondo blue

 #moreInfo iframe { border-radius: 50%; } 

Demostración 2 (Como ha comentado , falla en Chrome, lo investigaremos pronto)

Sería útil si agrega border-radius a .gm-style

 .gm-style{ -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; } 

Me está funcionando