Skip to main content
se añadieron 4 caracteres en el cuerpo
Origen Enlace

Es un bug de googlechrome que le ocurre a mucha gente. Lo más parecido a una solución, es añadirle un 0.01px0.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!

Es un bug de google 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!

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!

Origen Enlace

Es un bug de google 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!