How to avoid flickering on box shadow transition?

Question

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

Is it possible to fix it without extra 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>

Answer 1

Try setting a boxshadow of .09px

.hover {
max-width: 400px;
    color: red;
    background-color:  blue;
    display: table;
    text-align: left;
    cursor: pointer;
    box-shadow: inset 0 0 0 0.09px 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>

.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.09px #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.09px #fff;
   color: #000;
}

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