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!