从左到右滑动而不是褪色的safari css问题

Question

我有一个滚动标题，80 px修复后开始滚动。 问题出在safari中，它开始滚动但从左到右开始，而不是像其他浏览器一样褪色。

<header>
  This bis the header
</header>

$(window).on('scroll', function() {
    $('header').addClass('scrolling-header');
    var offset = $(document).scrollTop();
    if (offset < 80) {
        $('header').removeClass('scrolling-header');
    }
});

.scrolling-header {
    position: fixed;
    background: #FFF;
    opacity: 0.85;
    width: 100%;
    transform: all;
    -webkit-transition-duration: 0.8s;
    -moz-transition-duration: 0.8s;
    -o-transition-duration: 0.8s;
    transition-duration: 0.8s;
    -webkit-transform: translate3d(0,0,0);
}

小提琴

http://jsfiddle.net/uohLdwok/1/

Answer 1

发现问题，原因是你需要添加-webkit-transition-property: opacity, background, position; without宽度，如果你说全部，那么safari会解释每个属性。