Chrome 64bit - CSS动画导致定位错误

Question

你好我正在尝试创建一个与屏幕右侧对齐的按钮，这将导致下一篇文章。

一切都按照我想要的方式运行，直到我添加css转换为止。 正如你在小提琴中看到的那样，我有两倍完全相同的代码，除了蓝色条确实有一个css过渡属性而绿色条没有过渡。

我正在使用64位版本的chrome（45.0.2453.0 dev-m），而在这里绿色条的工作方式与悬停时一样，带有过渡的蓝色条的内容确实有一些主要的对齐错误。似乎容器的内容从容器中弹出。

<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（没有转换它可以工作 - 但是转换会导致对齐错误）

/*
.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/

在这里你可以看到Chrome 64bit-version（45.0.2453.0 dev-m）如何从悬停的蓝色条（带有css转换）的内容的对齐是错误的。文字消失在图像后面，图像位置错误等。 低于绿色栏的内容（没有css过渡）正确显示。

这是一个css错误还是什么？我该如何解决？

非常感谢提前！