從左到右滑動而不是褪色safari css問題

Question

我有一個滾動標題，80像素固定後開始滾動。 這個問題是在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瀏覽器解釋，如果你說所有的每個屬性。