Box-shadow y border-radius bug en Chrome
He estado experimentando con CSS3 y he encontrado algo extraño. Aquí está la parte del estilo DIV:
border:#446429 solid 1px;
border-radius:15px;
-moz-border-radius:15px;
-webkit-border-radius:15px;
box-shadow:3px 0px 15px #000000 inset,0px 3px 15px #000000 inset;
-moz-box-shadow:3px 0px 15px #000000 inset,0px 3px 15px #000000 inset;
-webkit-box-shadow:3px 0px 15px #000000 inset,0px 3px 15px #000000 inset;
El renderizado en Opera y Firefox es el mismo y perfecto:
Texto alternativo http://i47.tinypic.com/j8egp5.png
Pero Chrome hace sombra fuera de la frontera:
Texto alternativo http://i45.tinypic.com/5doykw.png
¿Se supone que es así o me perdí algo importante?
9 answers
Parece un bug conocido:
Http://code.google.com/p/chromium/issues/detail?id=29427
Echa un vistazo a la discusión de errores, puede encontrar una solución. Definitivamente Star este error si quieres que se solucione antes!
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2010-05-30 06:24:03
Poner primero una sombra insertada que sea del mismo color que el fondo parece funcionar bastante bien sin poner un marcado adicional en su página.
Por ejemplo, si usted tenía una página de fondo blanco :
-webkit-box-shadow:1px 1px 1px #fff inset,0px 0px 5px #333 inset;
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2013-08-25 11:37:49
Acabo de encontrar fix, pero necesita un marcado adicional. Necesitamos colocar el elemento con esquinas redondas y sombra interior en otro contenedor con las mismas esquinas redondas y desbordamiento oculto.
<div class="foo"><div>Hello!</div></div>
<style type="text/css">
.foo {-webkit-border-radius: 10px; overflow: hidden;}
.foo div {-webkit-border-radius: 10px; -webkit-box-shadow: inset 1px 1px rgba(50%, 50%, 50%, .5);}
</style>
Anunciado anteriormente fix with border se bloquea el radio del borde y es incompartible con la imagen de fondo bajo el elemento (debido al color del borde).
Gracias.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2010-12-30 13:43:07
La única solución que he visto es poner un borde en el elemento con la sombra y hacer que ese borde sea más ancho que la difusión de la sombra. Así que para una sombra insertada como esta:
box-shadow:inset 0 0 7px #000;
Tendría que agregar un borde como este:
border:solid 7px #fff;
Es el tercer número en la declaración box-shadow que debe coincidir (o exceder) con el ancho del borde. si no quieres un borde viejo y gordo en el elemento, obviamente necesitarás hacer el borde del mismo color que el fondo detrás de él. Por lo tanto, esta solución no ayuda mucho si su elemento está por encima de una imagen con patrón o un degradado. Pero en colores sólidos funciona decentemente.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2013-11-01 16:58:10
¡Buenas noticias! Parece que está llegando una solución. Aquí está el ticket en WebKit Bugzilla, marcado como resuelto / arreglado: https://bugs.webkit.org/show_bug.cgi?id=41576
Y aquí está el commit to trunk en el Trac de WebKit! http://trac.webkit.org/changeset/74089
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2010-12-15 20:19:47
Prueba esto-webkit-box-shadow: inset 0px 0 7px rgba(255, 242, 94, 0.4); el uso de rgba parece solucionarlo.
¡Buena suerte!
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2010-09-06 11:48:48
Usar valores negativos ha resuelto el problema para mí.
-webkit-border-radius:10px;
-webkit-box-shadow: -1px -1px 2px #CCC;
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2011-01-05 22:50:09
Este error se ha corregido en la última versión de canary. :)
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2011-01-08 08:35:57
La solución de Beth Fauld casi funciona, solo hay un pequeño error, debe verse como sigue:
-webkit-box-shadow:1px 1px 0px 1px #fff inset, 0px 0px 5px #333 inset;
Donde #fff es el color de fondo (fuera de la caja), y #333 es el color de sombra.
El tercer valor en -webkit-box-shadow define el tamaño del desenfoque, mientras que el cuarto define el tamaño de la sombra (opaco), por lo que es este último el que debe establecerse en 1px.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2011-03-16 09:41:09