CODEWITHSUNDEEP
safaricss-transitions
Plummer
Plummer

Reputation: 6688

safari - css3 transition not rendering

Using Sass/Bourbon/Neat, so mind the syntax.

I have a watcher for scroll events that adds a class to an element. I have transitions set to the element to have them ease in nicely.

In Safari, desktop and mobile, it's hit or miss, but it appears to not be rendering the styles when the class changes.

This does not happen on every view and it does not happen consistently. Sometimes it will load, sometimes it won't.

Could it not be related to the transforms at all? Maybe Safari just not paying full attention to the stylesheet all the time?

I have confirmed that the class is being added in safari and this works in all other browsers.

.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;
    }
}

Upvotes: 0

Views: 132

Answers (1)

Plummer
Plummer

Reputation: 6688

There is apparently a bug in safari with having multiple transitions applied to hierarchal elements. So, if the parent had a transition, it wouldn't always render the child transitions.

The solution was to insert a new BG element that was absolutely positioned and fit the width of the parent and apply the transition to it rather than the parent itself.

Upvotes: 1

Related Questions