¿-webkit-border-radius limitado?

daPhyre · #1 (**permalink**) 11/06/2009, 23:25

En el diseño de mi página web, he estado usando los border-radius neutral, para -moz y para -webkit como siguen:

#head{border-radius:4em;-moz-border-radius:4em;-webkit-border-radius:4em}

De igual forma que para #menu (border-radius:4em), #footer (border-radius:4em 0 0 4em) y .block (border-radius:2em).

En Firefox se ven perfectamente, sin embargo, en Google Chrome solo funcionan en menu y box, y misteriosamente en Apple Safari solo funcionan en box.

Me preguntaba si alguno de ustedes sabrá si esta función tiene alguna especie de límite, o quizá tengan alguna idea de por qué no esté funcionando correctamente. Se agradece cualquier ayuda.

willyfc · #2 (**permalink**) 12/06/2009, 07:55

Hasta donde he visto no tiene límites, no tendría sentido, haciéndolo de esta manera:

Código html:

Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Documento sin t&iacute;tulo</title>
<style type="text/css">
#cont1,#cont2,#cont3,#cont4,#cont5,#cont6{border-radius:10px;-moz-border-radius:10px;-webkit-border-radius:5px; border:1px solid #333; margin:10px auto; width:300px; height:100px;}
</style>
</head>
 
<body>
<div id="cont1"></div>
<div id="cont2"></div>
<div id="cont3"></div>
<div id="cont4"></div>
<div id="cont5"></div>
<div id="cont6"></div>
</body>
</html>

funciona correctamente, entonces el error es otro, puede ser de tipeo(tuyo), etiquetas abiertas...etc., por si acaso yo quitaría border-radius de las declaraciones ya que ninguno de los actuales lo va a soportar.

Una cosa más no he probado Safarí 4, aun no lo tengo.

daPhyre · #3 (**permalink**) 10/07/2009, 00:07

Después de largo tiempo de dar vueltas al código encontré el (los) errores.

1. Mientras al poner un valor más alto del correcto en Firefox, este lo limita al mayor, en webkit se desaparece.

Mi detalle, ponía un border-radius de 4em a un divisor que solo podía tener un máximo de 3.7em. Mientras Fx me lo cambió y se veía redondo como originalmente lo deseaba, en webkit desaparecía por completo.

2. Webkit solo admite un valor para border-radius. Donde tenía border-radius:4em 0 0 4em; me desconocía por completo los valores. Tuve que cambiarlos a uno solo, aunque en dichos navegadores ya no conseguí el efecto preciso que deseaba.

Espero mi experiencia la sirva en el futuro a alguien más, gracias por el apoyo.

kseso? · #4 (**permalink**) 10/07/2009, 07:33

Hola Daphyre
Grato encontrarte por aquí (aunque sea de tarde en tarde

)

Creo que el malfuncionamiento puede venir del hecho que la has tratado como una propiedad shorthand, que no tengo muy claro si lo será o no. Creo que no.

¿Probaste a definir cada una de las esquinas por separadocuando son valores distintos?:

Cita:

-moz-border-radius-topleft / -webkit-border-top-left-radius
-moz-border-radius-topright / -webkit-border-top-right-radius
-moz-border-radius-bottomleft / -webkit-border-bottom-left-radius
-moz-border-radius-bottomright / -webkit-border-bottom-right-radius

Ya dirás.

Un saludo

daPhyre · #5 (**permalink**) 10/07/2009, 23:04

Vaya, no recordaba que weblit tenía sus radius de forma distinta en este caso. Gracias, probaré para ver si me funciona como espero

Kenichi · #6 (**permalink**) 12/07/2009, 17:53

Tambien un truco para que funcione en IE8, agrega al final de las propiedades -webkit- lo siguiente: behavior:url(border-radius.htc); y ya tienes bordes redondeados en IE8

daPhyre · #7 (**permalink**) 12/07/2009, 19:42

Kseso?, todo salió de maravilla, ahora mi página si se ve como esperaba

... Por lo menos en Mozilla y Webkit =P

Kenichi, ¿No necesito para eso un archivo extra?

willyfc · #8 (**permalink**) 12/07/2009, 19:49

Cita:

Iniciado por daPhyre

¿No necesito para eso un archivo extra?

efectivamente daPhyre, si lo necesitas, si no estoy mal su nombre es algo así :iepngfix.htc

daPhyre · #9 (**permalink**) 12/07/2009, 19:51

El fix, claro, ya recuerdo haber leido de él

.

Gracias