Chrome 64bit - CSS animation causes positioning bug - html

Question

Hallo I am trying to create a button aligned to the right of the screen which leads to the next article.
Everything works as I want it, till the point when I add the css transition.
As you can see in the fiddle I have twice the exact same code, except that the blue bar does have a css transition property and the green bar does not have a transition.
I am using the 64bit version of chrome (45.0.2453.0 dev-m) and while in here the green bar works as supposed when hovered, the content from the blue bar with the transition does have some major alignment bug. It seems that the content of the containers pops out of the containers.
<nav class="nav-next">
<a href="link" class="link">
<div class="thumbnail">
<img width="100" height="100" src="http://travelwithoutplan.com/wp-content/uploads/DSC01985_Vibrance-100-200x200.jpg" class="attachment-100x100 wp-post-image" alt="DSC01985 Vibrance 100" />
</div>
<div class="headline">Travel Information for Liechtenstein</div>
</a>
</nav>
CSS (without transition it works - but with transition it causes an alignment bug)
/*
.nav-next {
-moz-transition: width .5s;
-o-transition: width .5s;
-webkit-transition: width .5s;
transition: width .5s;
}
*/
.nav-next {
background-color: lightblue;
overflow: hidden;
position: fixed;
top: 50px;
left: auto;
right: 0;
box-sizing: border-box;
width: 30px;
height: 120px;
}
.nav-next:hover {
width: 330px;
}
.nav-next .headline:after, .nav-next .link {
display: block;
border-top: 1px solid #8c8c8c;
}
.nav-next .link {
background: #fff;
height: 120px;
width: 300px;
box-sizing: border-box;
padding: 10px;
position: absolute;
right: 0;
top: 0;
margin-left: 30px;
margin-right: 30px;
border: 1px solid #8c8c8c;
border-right: none;
}
.nav-next:hover .link {
margin-left: 0;
}
.nav-next .link:before {
color: #262626;
left: auto;
right: -23px;
position: absolute;
top: 52px;
font-size: 16px;
font-size: 1rem;
content: "\e12e";
font-family: wp-svg-plugin-icon-set1!important;
}
.nav-next .thumbnail {
position: relative;
width: 100px;
float: left;
margin-left: 0;
margin-right: 5px;
}
.nav-next .headline {
color: #595959;
height: 100px;
overflow: hidden;
padding-right: 10px;
padding-top: 5px;
position: relative;
left: 4px;
right: 0;
font-size: 14px;
}
.nav-next .headline:after {
content: "Next Article";
position: absolute;
width: 100%;
bottom: 0;
padding-top: 5px;
text-align: right;
}
http://jsfiddle.net/64g0vzq1/4/
Here you can see how with Chrome 64bit-version (45.0.2453.0 dev-m) the aligment of the content from the hovered blue bar (with css transition) is wrong. The text disappears behind the image, the image positionig is wrong etc.
Below the content of the green bar (without css transition) is shown correctly.
Is this a css error or something? How can I fix it?
Many thanks in advance!