3

Tengo el siguiente codigo:

#cajanumeral {
    height: 220px;
    margin:1em auto; 
    text-align: center;
    width: 300px;
    display: table;
    background-color: #0000ff;
  }
  #cajahijo:hover {
    box-shadow: 325px 0 #330000 inset;
    color: #fff;
  }
  #cajahijo{
    flex: auto;
    -webkit-transition: all 1s;
    box-shadow: 10px 0 #330000 inset;
    display: table-cell;margin: 0; padding: 0 1em;vertical-align: middle;font-size: 50px;color:#ffff00
  }
<div id="cajanumeral" >
      <div id="cajahijo">
        37
      </div>
    </div>

Como verán el resultado al final de la transición parpadea de forma horrible, ¿Como hago para que esto no suceda?

4
  • Pareciera interferir con algo, lo probé en un codepen y no parpadea, también lo probé en local e igualmente no apareció el «parpadeo».
    – Shaz
    Commented el 26 abr. 2019 a las 2:47
  • @Shaz ,pero aqui en el foro te parpadea? o tampoco? el caso es que a mi, en mi pc si parpadea
    – Shassain
    Commented el 26 abr. 2019 a las 2:49
  • Bueno, stackoverflow no es un foro... pero sí, aquí en stackoverflow sí parpadea.
    – Shaz
    Commented el 26 abr. 2019 a las 2:50
  • en Chrome sí parpadea, en cambio en Firefox no
    – user7176
    Commented el 26 abr. 2019 a las 6:15

2 respuestas 2

2

Es un bug de chrome que le ocurre a mucha gente. Lo más parecido a una solución, es añadirle un 0.01px al box-shadow (ni idea de porque). Aun así de vez en cuando sigue ocurriendo, pero es mucho menor.

#cajanumeral {
    height: 220px;
    margin:1em auto; 
    text-align: center;
    width: 300px;
    display: table;
    background-color: #0000ff;
  }
  #cajahijo:hover {
    box-shadow:325px 0 0 0 #330000 inset;
    color: #fff;
  }
  #cajahijo{
    flex: auto;
    -webkit-transition: all 1s;
    box-shadow:10px 0 0 0.01px #330000 inset;
    display: table-cell;
    margin: 0; 
    padding: 0 1em;
    vertical-align: middle;
    font-size: 50px;
    color:#ffff00
  }
<div id="cajanumeral" >
      <div id="cajahijo">
        37
      </div>
    </div>

Espero que te ayude, un saludo!

1
  • en caso de no haber otra solucion utilizare la tuya, pero esperare un poco mas haber si alguien sabe que pasa.
    – Shassain
    Commented el 26 abr. 2019 a las 12:25
1

He conseguio hacer lo que quieres sin que parpadee, en vez de jugar con la sombra de la caja, lo he hecho con el ancho de la caja hijo.

He cambiado los colores para diferenciar mejor las cajas

    #cajanumeral {
        height: 220px;
        margin:1em auto; 
        text-align: center;
        width: 300px;
        background-color: black;
      	display:flex;
        align-items: center;
      }
      #cajahijo{
      	border: solid red 1px;
        width:5%;
        height:100%;
      	color: white;
      	-webkit-transition: all 1s;
      	background: red;
      }
      #cajanumeral:hover #cajahijo {
      	width: 100%;
      }
    	#vuela{
      		//border: solid green 1px;
      		position: absolute;
      		margin-top: 2$;
      		color: white;
          display: flex;
          justify-content: center;
          align-items: center;
      		font-size: 350%;
          margin-left: 18%;
    	}
    <div id="cajanumeral" >
      	  <div id="vuela">
          	37
      	  </div>
          <div id="cajahijo">
          </div>
        </div>

2
  • Es similar y es buena pero quisiera que el rojo se despliegue cuando el mouse este en el color negro.
    – Shassain
    Commented el 26 abr. 2019 a las 12:26
  • He editado la respuesta y he ajustado lo que decías, marca la respuesta como solucion o preguntame si hay algo que no te haya quedado claro. Salu2 Commented el 26 abr. 2019 a las 19:42

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.