在最新版本的chrome中使用变换动画错误过滤模糊

Question

运行Windows 8，Chrome V. 50.0.2661.94

在最新的Chrome更新之前，您可以对CSS应用-webkit-filter blur，并使用css转换为其设置动画，同时仍保持模糊。更新后，变换动画将移除模糊，并在完成后重新应用。

我已经制作了一个codepen来演示它： http://codepen.io/anon/pen/GZzpZZ?editors=1100

模糊效果在最后版本的铬和铬中起作用。

<a href="#" class="btn">Box shadow is jacked yo!</a>

.btn {
    position: relative;
    padding: 0.5em 1em;
    line-height: 1.42857143;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    margin-bottom: 0;
    vertical-align: middle;
    touch-action: manipulation;
    cursor: pointer;
    -webkit-user-select: none;
    text-shadow: 0 1px 0 rgba(0,0,0,0.1);
    font-size: 16px;
    font-weight: 600;
    color: #fff !important;
    transition: all .4s ease;
     background-image: -webkit-linear-gradient(top, #236E9F 0, #145580 100%);
    background-image: -o-linear-gradient(top, #236E9F 0, #145580 100%);
    background-image: -webkit-gradient(linear, left top, left bottom, from(#236E9F), to(#145580));
    background-image: linear-gradient(to bottom, #236E9F 0, #145580 100%);
    box-shadow: inset 0 1px 1px #1F8AD0,inset 0 -1px 4px #134a6d;
}
.btn:hover, .btn:focus {
    background-image: -webkit-linear-gradient(top, #216A9A 0, #104D75 100%);
    background-image: -o-linear-gradient(top, #216A9A 0, #104D75 100%);
    background-image: -webkit-gradient(linear, left top, left bottom, from(#216A9A), to(#104D75));
    background-image: linear-gradient(to bottom, #216A9A 0, #104D75 100%);
    background-position: inherit;
}
.btn::after {
    content: '';
    display: block;
    position: absolute;
    left: 1px;
    right: 1px;
    top: 4px;
    bottom: -4px;
    background: #c2cad2;
    mix-blend-mode: soft-light;
    -webkit-filter: blur(4px);
    filter: blur(6px);
    will-change: transform;
    transition: transform 1.5s cubic-bezier(0.2, 1, 0.3, 1);
    transform: translateY(1px);
    z-index: -1;
}
.btn:hover::after {
    transform: scale(1.01, 1.1) translateY(3px);
    transition-duration: .4s;
}