Fix motion UI series for safari 10

[kball]

For #85

[kball]

The core of the issue here appears to be that Safari in iOS 10 ignores keyframes that are not at the top of the CSS file (WHAT!?!? Apple what are you doing???)

I've put together a PR to allow us to make sure the keyframes are the first things generated here: #90

I could use some help testing this and verifying it does in fact address the issue. It worked in my cludged together test environment but I'll be the first to admit I don't have deep experience with the inner workings of Motion UI.

To try it out, point your motion UI dependency to https://github.com/zurb/motion-ui/tree/fix-motion-ui-for-safari-10 and then make sure that the @include motion-ui-animations; is the very first item generating CSS in your scss.

[ncoden]

Hi @kball. I am not able to reproduce the animation issue. Animations works well even when not at the top of the CSS file. https://codepen.io/ncoden/pen/vRQoVd

Could you take a look at this ?

[kball]

Sorry @ncoden I cannot reproduce the example easily either, and I do not recall at this point what I had done to get it both reproducing and then fix it. You can see the issue looking at the ZURB Playground piece https://zurb.com/playground/motion-ui in safari 10+ vs other browsers. The top/intro animation simply does not work in safari. I understand this is a very poor test case for reproduction, apologies for not having a better at hand.

[SassNinja]

I am not able to reproduce the animation issue. Animations works well even when not at the top of the CSS file. codepen.io/ncoden/pen/vRQoVd

Same on my side: that simple animation worked on all my tests (iOS 9.3, 10.2, 11.3)

Seems to be something else but I know what you mean @kball
The whole into part of the playground doesn't work on iOS 11.
The 'Series Animations' section doesn't work correctly on iOS 10 (toggles only visibility) and doesn't work at all on iOS 11 (remains invisible).

I'll try to find out more.

[SassNinja]

Really strange: I've extracted the series code from the playground page and it works like a charm! (all devices)
https://codepen.io/KaiTheGreat/pen/KRNzJQ

So it doesn't seem to be a problem that the @keyframes are not at top of the code.
@kball why did you assume the order is a problem since iOS 10?

However the pause/running is still a problem in my codepen.
Becomes quite obvious if you add animation-iteration-count: infinite; to the first CSS block.

Think it requires far more debugging to understand what's going on at the playground page.
I guess there isn't a (public) repo with the source code of that page, is there?

UPDATE

Seems the missing webfont files (Proxima Nova) are the reason why the series animation fails on iOS 10/11.

[DanielRuf]

Seems the missing webfont files (Proxima Nova) are the reason why the series animation fails on iOS 10/11.

So we can close this?