How to avoid flickering when transforming a shadow window?

Question

I have CSS that animates a shadow box on hover . It works in Firefox, but causes flickering in Opera / Chrome browser .

Is it possible to fix this without additional markup and without pseudo-elements?

.hover {
    color: #fff;
    background:  rgba(0, 0, 0, 0.5);
    display: block;
    display: inline-block;
    text-align: left;
    cursor: pointer;
    box-shadow: inset 0 0 0 0 #fff;
    -webkit-transition: box-shadow linear 0.5s,color linear 0.5s;
    -moz-transition: box-shadow linear 0.5s,color linear 0.5s;    
    transition: box-shadow linear 0.5s,color linear 0.5s;
}
.hover:hover {
   box-shadow: inset 424px 0 0 0 #fff;
   color: #000;
}

<h1 class="hover">This is some really looong title!</h1>

Run codeHide result

Answer 1

Try installing boxshadow.01px

.hover {
max-width: 400px;
    color: red;
    background-color:  blue;
    display: table;
    text-align: left;
    cursor: pointer;
    box-shadow: inset 0 0 0 0.01px white;    
    transition: all ease 5.5s;
}
.hover:hover {
    background-color:  blue;
   box-shadow: inset 440px 0 0 0 #fff;
   color: #000;
}

<h1 class="hover">This&nbsp;is&nbsp;some&nbsp;really&nbsp;looong&nbsp;title!</h1>

Run codeHide result

.hover {
    color: #fff;
    background:  rgba(0, 0, 0, 0.5);
    display: block;
    display: inline-block;
    text-align: left;
    cursor: pointer;
    box-shadow: inset 0 0 0 0.01px #fff;
    -webkit-transition: box-shadow linear 0.5s,color linear 0.5s;
    -moz-transition: box-shadow linear 0.5s,color linear 0.5s;    
    transition: box-shadow linear 0.5s,color linear 0.5s;
}
.hover:hover {
   box-shadow: inset 424px 0 0 0.01px #fff;
   color: #000;
}

<h1 class="hover">This is some really looong title!</h1>

Run codeHide result