Safari

Question

使用 Sass/Bourbon/Neat，请注意语法。

我有一个滚动事件观察器，它向元素添加 class。我已经为元素设置了过渡，让它们很好地缓和。

在 Safari、桌面和移动设备中，它是成功的还是失败的，但当 class 更改时它似乎没有呈现样式。

这不会发生在每个视图上，也不会始终发生。有时会加载，有时不会。

难道跟变换一点关系都没有？也许 Safari 只是没有一直全神贯注于样式表？

我已经确认 class 正在添加到 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 元素，该元素绝对定位并适合父元素的宽度，并将过渡应用到它而不是父元素本身。

Safari - css3 过渡不渲染

safari - css3 transition not rendering

css-transitions