html - Chrome 64bit - CSS animation causes positioning bug -

hallo trying create button aligned right of screen leads next article.

everything works want it, till point when add css transition. can see in fiddle have twice exact same code, except blue bar have css transition property , green bar not have transition.

i using 64bit version of chrome (45.0.2453.0 dev-m) , while in here green bar works supposed when hovered, content blue bar transition have major alignment bug. seems content of containers pops out of 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 liechtenstein</div>     </a> </nav> 

css (without transition works - transition causes 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 can see how chrome 64bit-version (45.0.2453.0 dev-m) aligment of content hovered blue bar (with css transition) wrong. text disappears behind image, image positionig wrong etc. below content of green bar (without css transition) shown correctly.

is css error or something? how can fix it?

many in advance!