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 中显然存在一个错误，将多个转换应用于层次元素。因此，如果父级有过渡，它不会总是呈现子级过渡。

解决方案是插入一个绝对定位并适合父级宽度的新 BG 元素，并将过渡应用到它而不是父级本身。