CSS background-color transition not working in specific browsers (desktop + mobile)

Question

I have this SCSS that, in theory, should transition the background color smoothly, but it is not smooth in specific browsers.

See this codepen for a demo: http://codepen.io/ahegyi/pen/Wvjajy

(Click on the photo or note text to activate the transition. It's more obvious if you click on the text.)

.overlay {
  -webkit-transition: background-color 0.2s ease;
  -moz-transition: background-color 0.2s ease;
  -ms-transition: background-color 0.2s ease;
  -o-transition: background-color 0.2s ease;
  transition: background-color 0.2s ease;

  background-color: rgba(0,0,0,0.3);

  &.reveal {
    background-color: rgba(0,0,0,0);
  }
  &.conceal {
    background-color: rgba(0,0,0,0.7);
  }
}

In Chrome desktop (version 42.0.2311.152, Mac OS 10.9) and Firefox desktop (version 36.0.4, Mac OS 10.9), the transitions are smooth.

However, in Safari (both desktop v7.1.3 + mobile Safari on iOS 8.1.3) and Chrome mobile on iOS (v 38.0.2125.59) do not transition, and instead snap directly.

Can anyone reproduce this issue? Is this a bug in certain versions of WebKit, or am I missing something here? Could it be that other transitions I use interact poorly with this particular transition? (In parallel, I'm also using a height transition on .mark-note-text h2, and a jQuery slide effect on the .mark-content div.)

Answer 1

The issue appears to be caused by a syntax error in your externally loaded CSS.

In this file, you will find this code.

.mark-object .overlay{-webkit-transition:background-color, 200ms, ease;-moz-transition:background-color, 200ms, ease;-ms-transition:background-color, 200ms, ease;-o-transition:background-color, 200ms, ease;transition:background-color, 200ms, ease;

Which looks like this beautified.

.mark-object .overlay {
    -webkit-transition: background-color, 200ms, ease;
       -moz-transition: background-color, 200ms, ease;
        -ms-transition: background-color, 200ms, ease;
         -o-transition: background-color, 200ms, ease;
            transition: background-color, 200ms, ease;

As you can see, there are commas between the properties, the duration, and the easing function, but there should only be commas to delimit different properties.

Also, the CSS you have in your CodePen is less-specific than your external CSS, so it has no effect. If you were to increase the specificity, your pen would work.

You can see how Safari is error-handling this in the applied styles.

However, Firefox error handles it in a different way, assuming all for the bare settings.

We can see from the computed styles that non-iOS Chrome does the same as Firefox.

Of course, the reason Chrome behaves the same as Safari on iOS is because iOS Chrome uses the same rendering engine as Safari, as per Apple's requirement.