Foros del Web » Creando para Internet » CSS »

[SOLUCIONADO] ¿Por qué no me funcionan los porcentajes transform:translate en Chrome?

Estas en el tema de ¿Por qué no me funcionan los porcentajes transform:translate en Chrome? en el foro de CSS en Foros del Web. Buen día. Mi problema es que que, en el código que mostraré a continuación, el transform:translate funciona de distintas formas según el navegador: En Chrome ...
  #1 (permalink)  
Antiguo 28/12/2013, 14:37
Avatar de berkeleyPunk  
Fecha de Ingreso: febrero-2013
Ubicación: México :C
Mensajes: 565
Antigüedad: 11 años, 2 meses
Puntos: 22
De acuerdo ¿Por qué no me funcionan los porcentajes transform:translate en Chrome?

Buen día.

Mi problema es que que, en el código que mostraré a continuación, el transform:translate funciona de distintas formas según el navegador:

En Chrome: No se ve la transición (sí, si se ponen los valores del transalte en pixeles)
En Firefox: Se ve perfectamente la transición.
En Opera: Se ve la transición sólo de ida, no de vuelta.
En IE 11: Se ve perfectamente la transición.

Código CSS:
Ver original
  1. html, body {width:100%; height:100%;}
  2.  
  3. #content {
  4.     position:relative;
  5.     top:10%;
  6.     left:0;
  7.     width:50%;
  8.     height:70%;
  9.     margin:0 auto 0 auto;
  10.     z-index:1001;
  11.     border:1px solid yellow;
  12. }
  13. #cuadroNegro {
  14.     position:absolute;
  15.     top:35%;
  16.     left:37%;
  17.     width:25%;
  18.     height:35%;
  19.     background-color:black;
  20.     z-index:1000;
  21. }
  22. #circulo_1 {
  23.     position:absolute;
  24.     top:52%;
  25.     left:49%;
  26.     width:5px;
  27.     height:5px;
  28.     opacity:1;
  29.     z-index:1001;
  30.     background-color:#F00;
  31.     -webkit-transition:all ease 1s;
  32.     -moz-transition:all ease 1s;
  33.     -ms-transition:all ease 1s;
  34.     -o-transition:all ease 1s;
  35.     transition:all ease 1s;
  36. }
  37. #content:hover #circulo_1 {
  38.     width:20%;
  39.     height:25%;
  40.     opacity:1;
  41.     -webkit-transform:translate(-100%,-100%);
  42.     -moz-transform:translate(-100%,-100%);
  43.     -ms-transform:translate(-100%,-100%);
  44.     -o-transform:translate(-100%,-100%);
  45.     transform:translate(-100%,-100%);
  46. }


Código HTML:
Ver original
  1. <div style="position:absolute; top:0; left:0; width:100%; height:100%;">
  2.   <div id="content">
  3.  
  4.     <div id="cuadroNegro">
  5.     </div>  
  6.    
  7.     <div id="circulo_1">1  
  8.     </div>  
  9.    
  10.   </div>
  11. </div>

Las preguntas sería: ¿Qué cambios tendría que hacer para que en Chrome se vea la transición utilizando porcentajes? y ¿cómo hacer para que Opera muestre la transición "de vuelta"?



Saludos cordiales.
  #2 (permalink)  
Antiguo 29/12/2013, 15:09
Avatar de pzin
Moderata 😈
 
Fecha de Ingreso: julio-2002
Ubicación: Islas Canarias
Mensajes: 10.488
Antigüedad: 21 años, 8 meses
Puntos: 2114
Respuesta: ¿Por qué no me funcionan los porcentajes transform:translate en Chrome?

Lo de Chrome es un bug por lo visto: https://code.google.com/p/chromium/i...tail?id=141823

Así si funciona: http://jsfiddle.net/2e2Wc
  #3 (permalink)  
Antiguo 30/12/2013, 00:07
Avatar de berkeleyPunk  
Fecha de Ingreso: febrero-2013
Ubicación: México :C
Mensajes: 565
Antigüedad: 11 años, 2 meses
Puntos: 22
De acuerdo Respuesta: ¿Por qué no me funcionan los porcentajes transform:translate en Chrome?

Cita:
Iniciado por pzin Ver Mensaje
Lo de Chrome es un bug por lo visto...
Un bug? Vaya que conoces el tema, cómo podías saber eso exactamente?

Bueno. Sea como fuere, pues ya obtuve respuesta al tema.

Gracias nuevamente y hasta la vista.
  #4 (permalink)  
Antiguo 30/12/2013, 05:14
Avatar de pzin
Moderata 😈
 
Fecha de Ingreso: julio-2002
Ubicación: Islas Canarias
Mensajes: 10.488
Antigüedad: 21 años, 8 meses
Puntos: 2114
Respuesta: ¿Por qué no me funcionan los porcentajes transform:translate en Chrome?

Cita:
Iniciado por berkeleyPunk Ver Mensaje
Un bug? Vaya que conoces el tema, cómo podías saber eso exactamente?
Buscando en Google.

Etiquetas: Ninguno
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 21:40.