safari - css3轉換不呈現

Question

使用Sass/Bourbon/Neat，請記住語法。

我有一個監視器來爲元素添加一個類的滾動事件。我有過渡設置元素，讓他們很好地緩解。

在Safari，桌面和移動設備中，它被擊中或未命中，但它似乎不會在類更改時渲染樣式。

這不會發生在每個視圖上，也不會一致發生。有時它會加載，有時它不會。

難道它根本不和變形有關？也許Safari只是沒有時刻關注樣式表？

我已確認該課程正在Safari中添加，並且適用於所有其他瀏覽器。

.header-box { 
    position: fixed; 
    z-index: 99999999999999999; 
    top: 0; 
    left: 0; 
    width: 100%; 
    padding-top: 1em; 
    padding-bottom: 0.3em; 
    @include transition(All 0.5s ease); 

    &.nav-scroll { 
     border-bottom: 2px solid $color__brand-light-grey; 
     background-color: $color__brand-white; 
    } 
} 

Answer 1

很明顯，safari中存在一個bug，因爲有多個轉換應用於分層元素。所以，如果父母有一個過渡，它不會總是呈現孩子的過渡。

解決方法是插入一個新的BG元素，該元素是絕對定位的，並且符合父級的寬度，並向其應用轉換而不是父級本身。