Mui-Series Safari 11 Compatibility

Question

Mui-Series Safari 11 Compatibility

klf6890 opened this issue 7 years ago · 26 comments

Any mui-series animations seem to fail in Safari 11, including the Motion UI landing page

Answer 1 · 2017-10-09T19:18:14.000Z

Confirmed as well. Confirmed with a phone that was running io10 where the animations worked and then upgraded to 11 and it stopped working. Its just blank now.

Answer 2 · 2017-10-17T08:32:15.000Z

Yes, this is pretty annoying.

Answer 3 · 2017-11-20T19:13:19.000Z

Will motion-ui be further developped by zurb? Last code commits are 2 years old. Will this Safari problem be solved in future?

Answer 4 · 2017-12-26T13:32:49.000Z

Seems no longer maintained, which is a bummer because there is no clear cross-compatibility for using other animation frameworks like animate.css or anime.js. Seems that they called it a day since October 2016.

Anyway, I'm gonna politely bitch about to Zurb.

Answer 5 · 2018-04-08T13:20:07.000Z

Hi, sorry for the late reply.

I am not able to reproduce it. Animations seems to work well on iOS Safari 10/11 and macOs Safari 11. Could you provide a Codepen with the animation that fails and tell the iOS Safari version you are using ?

Answer 6 · 2018-04-19T18:56:20.000Z

I am able to reproduce it. See https://codepen.io/ncoden/pen/wmNvWG

Answer 7 · 2018-04-19T20:29:45.000Z

So this comes at least from a bug with animation-play-state breaking the animation in Safari. But it works after a refresh...

There is probably an other bug as on the demo page the animation does not run after a refresh. However there is the same weird effect in the developer console as in the bug codepen: when they are animated, ::before and ::after pseudo-elements appear and disappear from the elements and make them vibrating (yeah, weird).

A solution would be to use the same approach as animate.css and only apply animation-duration when the animation should run.

benefits: this works on all browsers.
downsides: once started, the animation is never "paused" but runs in background.

Poke @eltonmesquita @daneden @WarenGonzagaOfficial What do you think ? Were you aware of this bug at animate.css ?

Answer 8 · 2018-04-19T21:02:40.000Z

See also: http://elrumordelaluz.github.io/csshake/#1

shake-freeze does not work in Safari. Animation can be paused later without problem, but they will never start when they are paused on page load. poke @elrumordelaluz

Answer 9 · 2018-04-24T20:21:54.000Z

Poke @SassNinja. I don't know how to resolve this. Could you help me here ?

Answer 10 · 2018-04-25T01:37:33.000Z

Hello there, I am not aware on this since I am not user of any apple product... but recently I made a major upadate on animate.css which I add delays on it as part of class options.

Answer 11 · 2018-04-27T07:49:10.000Z

I've tested the minimalist codepen (https://codepen.io/ncoden/pen/QmYLzy) on iPhone 6 with

iOS 9.3
iOS 10.2
iOS 11.3

In each case the animation can't be paused and gets somehow reset on click (depending on when you click).
Seems this bug exists for quite a long time: I've found some post abt iOS 8
https://stackoverflow.com/questions/27362216/webkit-animation-play-state-not-working-on-ios-8-1-probably-lower-too

Afterwards I've tested the 'Series Animations' section of this page on the devices
https://zurb.com/playground/motion-ui#animationDemo

iOS 9.3 animation runs as expected
iOS 10.2 animation doesn't run but only toggles from invisible to visible on button click
iOS 11.3 animation doesn't run and doesn't become visible on button click

@ncoden why exactly did you test animation-play-state in your codepen?
I didn't find it in the motion-ui.css. Seems to be a general iOS problem.

A solution would be to use the same approach as animate.css and only apply animation-delay when the animation should run.

What do you have in mind here? 1000s delay to keep it initially running and set it to 0s once the animation is actually supposed to run or do you mean sth else?

Answer 12 · 2018-04-27T20:29:04.000Z

@SassNinja

why exactly did you test animation-play-state in your codepen?

animation-play-state is used my mui-series to play it only with .is-animating set.

With animation-play-state: paused set, the animation does not start on macOS Safari 11, even with animation-play-state: running defined later.
Without animation-play-state: paused set, the animation plays well on macOs Safari 11.

What do you have in mind here?

Sorry, I meant animation-duration, defined only when the animation should run.

Answer 13 · 2018-04-30T09:13:34.000Z

With animation-play-state: paused set, the animation does not start on macOS Safari 11, even with animation-play-state: running defined later.

So your codepen https://codepen.io/ncoden/pen/QmYLzy doesn't work for you on macOS Safari 11?
For me it does! I just tested on Safari 11.0.2 on macOS High Sierra and the animation works as expected. Initially paused and running after click.

Sorry, I meant animation-duration, defined only when the animation should run.

Alright, but anyway similar to what I imagined regarding animation-delay.
So you mean setting initially a huge duration (instead of paused) and setting it to reasonable value on click (instead of running), right?

.animation {
	animation-duration: 5000s;
}
.animation.is-animating {
	animation-duration: 5s;
}

If that's what you're talking about I'm afraid it's not a good solution because it's a hard reset of the animation instead of pause.
But unfortunately I don't know a good solution either – it's simply missing / buggy feature support of iOS.

UPDATE

Tested the duration solution on iPhone (iOS 11.3) now: doesn't work either :/
Seems iOS doesn't like changes of animation properties while the animation is running.

Answer 14 · 2018-04-30T10:22:18.000Z

So your codepen codepen.io/ncoden/pen/QmYLzy doesn't work for you on macOS Safari 11?
For me it does! I just tested on Safari 11.0.2 on macOS High Sierra and the animation works as expected. Initially paused and running after click.

Did you opened the debug mode in a new window ? The animation works when embeded in an inframe or after refreshing the page.

So you mean setting initially a huge duration (instead of paused) and setting it to reasonable value on click (instead of running), right?

No, i meant:

.animation {
	/* nothing */
}
.animation.is-animating {
	animation-duration: 5s;
}

If that's what you're talking about I'm afraid it's not a good solution because it's a hard reset of the animation instead of pause.

Yes it is, as explained in #97 (comment):

benefits: this works on all browsers.

downsides: once started, the animation is never "paused" but runs in background.

It's the way others animation frameworks works: applying animation-duration or animation-name only when the animation should run. This either reset the animation or let it play in the background. But it's the only solution I found to make it works in Safari 11.

Answer 15 · 2018-04-30T14:55:41.000Z

Did you opened the debug mode in a new window ? The animation works when embeded in an inframe or after refreshing the page.

Strange it also works for me in debug mode – no difference.

It's the way others animation frameworks works: applying animation-duration or animation-name only when the animation should run. This either reset the animation or let it play in the background. But it's the only solution I found to make it works in Safari 11.

I'm afraid I haven't got it yet.
If I change the codepen as described in your code example it doesn't work in Safari 11 any more (in debug mode). Precisely I can start the animation by clicking the button but I'm not able to stop it with further clicks.

Just to be sure we're talking about the same thing.
Is this what you mean?
https://codepen.io/KaiTheGreat/pen/YLZqWO

Answer 16 · 2018-04-30T16:03:32.000Z

Strange it also works for me in debug mode – no difference.

Make sure to open the Debug mode in a new Safari window, without url opened before. Before refresh, animation does not start. After refresh, animation works well.

See:

Also:

There is probably an other bug as on the demo page the animation does not run after a refresh. However there is the same weird effect in the developer console as in the bug codepen: when they are animated, ::before and ::after pseudo-elements appear and disappear from the elements and make them vibrating (yeah, weird).

Is this what you mean?

See:

Answer 17 · 2018-05-02T07:28:27.000Z

Make sure to open the Debug mode in a new Safari window, without url opened before. Before refresh, animation does not start. After refresh, animation works well.

Really odd behavior (why does it work after page refresh?!) but I was able to reproduce by following your steps.

See:

With the "Duration" solution

Based on CSShack

Based on animate.css

Thanks for the pens!
I did fork them all (unfortunately I don't have a pro account) and have tested them in debug mode:

"Duration" solution works
CSShack doesn't work (due to pause/running)
animate.css works

So the duration solution seems indeed to be the best/only cross browser solution.
However is has the downside that the animation gets stopped/reset immediately instead of pausing it.

But since it's more important to have a working animation in all browser that can't be really paused instead of having an animation that can be paused but only works in certain browsers, I would go with the duration solution and add a clear note in the release notes (breaking change).

What do you think?

Answer 18 · 2018-05-02T17:28:20.000Z

What do you think?

I agree. I prefer a little 🏠 over a big 🏰 that would collapse on the first rain. I hoped you'll come with an awesome magic CSS fix but it seems this just cannot be fixed.

I'm still not sure about one thing: should we change the current mui-series paused behavior to ensure a maximum compatibility and introduce a downside, or should we split that into 2 features like "reset" (works everywhere) and "pause" (doesn't work on Safari) ?

It may be a stupid question because people generally expect web features to work on all browsers (I'm looking at you Google). But the second option gives us more flexibility to deal with a future Safari fix.

Answer 19 · 2018-05-02T20:27:05.000Z

I'll go for a mixed approach: making "reset" the default behavior when .is-animated is removed, and add some new modifiers to make the animation "pause" instead.

So we favour a large compatibility but still allow to use the old behavior.

Answer 20 · 2018-05-03T07:12:23.000Z

I hoped you'll come with an awesome magic CSS fix but it seems this just cannot be fixed.

Right, there seems to be no real alternative to animation-play-state: paused.
So unfortunately no magic this time.

I'll go for a mixed approach: making "reset" the default behavior when .is-animated is removed, and add some new modifiers to make the animation "pause" instead.

That sounds as the best solution to me.
Default working in all browsers and advanced feature with note in the docs that it's not supported in Safari.

Answer 21 · 2018-05-04T07:41:19.000Z

Ok I got this working with a way more complicated workaround:

Apply the first frame properties to the element (so it works like animation-fill-mode: both)
Set animation-name only when the animation play

The downside is the same: the animation cannot be paused but only reset. I'll do some cleaning and create a PR tonigh.

Answer 22 · 2018-05-04T20:24:06.000Z

Poke @hugogiraudel, your help on this issue would be very helpful and much appreciated 😉
(See the conversation from #97 (comment))

Answer 23 · 2018-05-05T13:13:50.000Z

I'm late for the party but here are my 2 cents on the issue:
First of all, I'm not aware of the MUI code and never used it so I might be a bit off.

If this is a breaking issue only on one version of one browser, I don't think that changing the default behaviour is a good idea. I think a better solution would be to have some big warnings on the docs about it and how to avoid it, maybe add a optional helper class/mixin/whatever to deal with the issue. If things are critical treat this in the js side with UA sniffing, which usually is considered bad but in a case like this is one of the best solutions.

Most importantly, filling a bug on the browser's issue tracker would be the way to go.
Anyway, those are just my - maybe out of context - thoughts.

Answer 24 · 2018-05-05T18:32:03.000Z

If this is a breaking issue only on one version of one browser, I don't think that changing the default behaviour is a good idea.
-- @eltonmesquita

The bug is present on all macOS Safari versions I tested (8, 9, 11...), including the latest. So it affects something like 2% of our users. Latest Safari version is in our compatibility list (last 2 versions) and the usage is high enough to consider it in a consistent API across browsers.

Also, most often, the animation is started and never paused. IMHO, dropping the pause behavior by default will not have much impact and it can still be recovered for the animations that require it.

With the UA sniffing to switch between the two system, animations would work on all browsers, and would be pausable on all browsers but macOS Safari. So this is the best solution but require to add some JS to Motion UI (which is CSS only). Without the JS included we still need to decide what we want to preserve: the pause behavior or the Safari compatibility.

Most importantly, filling a bug on the browser's issue tracker would be the way to go.

You're right.

Answer 25 · 2018-05-06T17:37:48.000Z

Actually I think I found a way better fix:

Safari supports animation-play-state and animation-fill-mode but bugs and never start the animation when animation-play-state: paused is set by default. If animation-play-state: paused is set later, Safari should pause the animation like others browsers.

So we could have the following behavior:

At first no animation-name is set and the first frame properties are applied. So it looks like the animation is paused at the first frame.
Start the animation with .is-animating which set animation-name. So the animation start.
Pause the animation with .is-paused which se animation-play-state: paused. So the animation is paused (on all browsers).
Restart the animation by removing .is-paused
Reset the animation by removing .is-animating

And we have:

Pausable animations on all browsers
No sniffing of browser-specific code
No JS needed

I'll make some tests and open a PR. I hope it will work as like imagined it.

Answer 26 · 2018-05-06T21:00:27.000Z

I'll make some tests and open a PR. I hope it will work as like imagined it.

It works. Play, pause and reset is now availaible on all browsers. See #108