Motion UI mui-series no longer works in iOS 10.0.2

[msliwa-carousel]

The animations no longer work. When you scroll down to the waypoint, they all appear and flash in at once. It does the same thing on the motion UI playground page. iOS 10.0.2

http://zurb.com/playground/motion-ui

Scroll down to series animations and click the button. They all appear at once on iPhone but work fine in Safari and Chrome etc.

[lokidokicoki]

same here +1

[akirax]

+1 seeing the same issue

[connerchill]

I'm experiencing this problem as well.

[ochorocho]

I have the same problem with my own mui-series. Safari does not honor the animation applied to the child elements. Same with the current developer preview.

Any clues how to work around this?

[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.

[ochorocho]

Hey,
i tested branch fix-motion-ui-for-safari-10 on Safari Desktop version 10.1 and Safari on iOS 10.0.
Both still show the same symptoms.

See my tests here: http://motion.knallimall.org

Things i noticed on the javascript triggered animation:

• it works sometimes (clear caches, close and open browser)
• in some cases the only one or two of the thee elements are animated.
• most of the time when you click the "start ani" button elements just moved to the final position without animation.

Thanks

[kball]

@ochorocho looking at the css there the keyframes are still not at the top... did you make sure @include motion-ui-animations; is the first thing in your scss file as mentioned above? Can you try again with that?

[ochorocho]

@kball ok, tried to move it to the very top of my scss.

This is my app.scss:

@import 'motion-ui';

@include motion-ui-animations;
@include motion-ui-transitions;

@import 'style';

When i move @include motion-ui-animations; and @include motion-ui-transitions; to the very top (above motion-ui) is throws this error

Running "sass:dist" (sass) task
>> Error: no mixin named motion-ui-animations
>> 
>>        Backtrace:
>>              scss/app.scss:1
>>         on line 1 of scss/app.scss
>> >> @include motion-ui-animations;
>>    ---------^
Warning:  Use --force to continue.

Aborted due to warnings.

What else can i do to move the motion-ui-animations to the top of the generated css file?
Tried it manually but no luck.

Thanks for your support.

[kball]

@import should have no side effects in terms of generating CSS, so as long as @include motion-ui-animations is first, you should be ok... hmm... wonder why you're not seeing the keyframes at the top then. Are you sure your motion-ui is targeting the branch in question? Can you give me access to the repo in question so I can take a look?