Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Mui-Series Safari 11 Compatibility #97

Closed
klf6890 opened this issue Sep 26, 2017 · 26 comments
Closed

Mui-Series Safari 11 Compatibility #97

klf6890 opened this issue Sep 26, 2017 · 26 comments
Labels

Comments

@klf6890
Copy link

klf6890 commented Sep 26, 2017

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

@msbtterswrth
Copy link

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.

@ghost
Copy link

ghost commented Oct 17, 2017

Yes, this is pretty annoying.

@jfritsch123
Copy link

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

@ItaloBC
Copy link

ItaloBC commented Dec 26, 2017

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.

@ncoden
Copy link
Contributor

ncoden commented Apr 8, 2018

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 ?

@ncoden
Copy link
Contributor

ncoden commented Apr 19, 2018

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

@ncoden
Copy link
Contributor

ncoden commented Apr 19, 2018

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 ?

@ncoden
Copy link
Contributor

ncoden commented Apr 19, 2018

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

@ncoden
Copy link
Contributor

ncoden commented Apr 24, 2018

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

@warengonzaga
Copy link

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.

@SassNinja
Copy link

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?

@ncoden
Copy link
Contributor

ncoden commented Apr 27, 2018

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

@SassNinja
Copy link

SassNinja commented Apr 30, 2018

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.

@ncoden
Copy link
Contributor

ncoden commented Apr 30, 2018

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.

@SassNinja
Copy link

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

@ncoden
Copy link
Contributor

ncoden commented Apr 30, 2018

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:
Preview

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:

@SassNinja
Copy link

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:

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?

@ncoden
Copy link
Contributor

ncoden commented May 2, 2018

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.

@ncoden
Copy link
Contributor

ncoden commented May 2, 2018

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.

@SassNinja
Copy link

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.

@ncoden
Copy link
Contributor

ncoden commented May 4, 2018

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.

@ncoden
Copy link
Contributor

ncoden commented May 4, 2018

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

ncoden added a commit to ncoden/motion-ui that referenced this issue May 4, 2018


Do not set the animation name until it need to be played. This is the only way to control the animation start on all browsers (including latest Safari versions). See issue for more informations.

**BREAKING CHANGE**
When `.is-animating` is removed from `.mui-series`, the animation is now reset instead of paused. Setting `.is-animating` back will start the animation from its begining.

Closes foundation#97
ncoden added a commit to ncoden/motion-ui that referenced this issue May 4, 2018
Allow to enforce the previous paused behavior with a "mui-pause" modifier on `mui-series` elements.

See foundation#97
@eltonmesquita
Copy link

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.

@ncoden
Copy link
Contributor

ncoden commented May 5, 2018

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.

@ncoden
Copy link
Contributor

ncoden commented May 6, 2018

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.

ncoden added a commit to ncoden/motion-ui that referenced this issue May 6, 2018


Do not set the animation name until it need to be played. This is the only way to control the animation start on all browsers (including latest Safari versions). See issue for more informations.

**BREAKING CHANGE**
When `.is-animating` is removed from `.mui-series`, the animation is now reset instead of paused. Setting `.is-animating` back will start the animation from its begining.

Closes foundation#97
ncoden added a commit to ncoden/motion-ui that referenced this issue May 6, 2018
As `.is-paused` is not set at the animation definition, Safari handle it correctly and can play and pause the animation.

See foundation#97 (comment)
@ncoden
Copy link
Contributor

ncoden commented May 6, 2018

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

ncoden added a commit that referenced this issue May 8, 2018
feat: change mui-series pause behavior & add `.is-paused` for Safari support #97
ncoden added a commit to ncoden/motion-ui that referenced this issue May 21, 2018
# Motion UI v2.0.0

We're happy to release Motion UI 2.0 with a better support of macOS Safari, API improvements, some bug fixes and various maintanance stuff.

## 🚀  Bidirectionals transitions/effects defaults

We changed the default direction of all transition and effect mixins so it depends on the `in` or `out` state. Calling the same mixin with `in` and `out` states now results in the same animation playing forward and backward.

💥 **BREAKING CHANGE**. We changed the effects and transitions API the following way:
* All direction-related options now have opposite values as defauls according to the `in` or `out` state.
* The `slide` effect defaults are now `left` and `right` (according to `$state`) for consistency with the `slide` transition.
* The `zoom` transition and effect defaults are now `0` and `1` (according to `$state`) for consistency with others transitions defaults.

### How to migrate

For the `hinge`, `slide`, `spin`, `zoom` effect functions and `mui-fade`, `mui-hinge`, `mui-slide`, `mui-spin`, `mui-zoom` transition mixins: if `$state: out` is used and no direction parameters are given, manually pass the "forward" parameters to keep them playing forward.

```scss
// Before
@include mui-fade($state: out /*, $from: 0, $to: 1*/);
// After
@include mui-fade($state: out, $from: 0, $to: 1);
```

For the `slide` effect function: if no `$direction` is given, manually pass `$direction: up` to keep the effect sliding to top instead of the new default `left`/`right`.

```scss
// Before
$effect: slide(/* $direction: up */);
// After
$effect: slide($direction: up);
```

For the `mui-zoom` transition mixin: if no `$from` or `$to` are given, manually pass `$from: 1.5` and `$to: 1` to keep the previous behavior.

```scss
// Before
@include mui-zoom(/* $from: 1.5, $to: 1 */);
// After
@include mui-zoom($from: 1.5, $to: 1);
```

## 🚀  New pausing behavior for `mui-queue` for Safari support

With the previous `mui-series` behavior, the serie was paused until the `.is-animating` class was added. Unfortately, the implementation behind this did not work on all macOS Safari versions and was even breaking the whole animation. In order to fully support macOS Safari, we changed the `mui-series` paused
behavior and introduced `.is-paused`.

💥 **BREAKING CHANGE**: When `.is-animating` is removed from `.mui-series`, the queue is now reset instead of paused. Setting `.is-animating` back will start the queue from its begining.

From now you can:
* **Start** the queue by adding `.is-animating`
* **Pause** the queue by adding `.is-paused`
* **Continue** the queue by removing `.is-paused`
* **Reset** the queue by removing `.is-animating`

### How to migrate

If you need an animation to pause midway, add `.is-paused` instead of removing `.is-animating`. For example in jQuery:

```js
// Before
function play($elem) {
  $elem.addClass('is-animating');
}
function pause($elem) {
  $elem.removeClass('is-animating');
}

// After
function play($elem) {
  $elem.addClass('is-animating').removeClass('is-paused');
}
function pause($elem) {
  $elem.addClass('is-paused');
}
function reset($elem) {
  $elem.removeClass('is-animating is-paused');
}
```

As a side-effect of this, standard animations names are not supported anymore as `mui-series` queues names. Make sure you use unique names for your `mui-series` queues.

```scss
// Before
@include mui-series {
  .shake          { @include mui-queue(3s, 0s, shake); }
  .spin           { @include mui-queue(3s, 0s, spin); }
}

// After
@include mui-series {
  .my-serie-shake { @include mui-queue(3s, 0s, shake); }
  .my-serie-spin  { @include mui-queue(3s, 0s, spin); }
}
```

## 🐛  Safer animation keyframes names for CSS

Fixes a bug when using decimals values for the `zoom` effect and transition arguments would generate an invalid CSS Keyframes name and break the animation.

We changed the way we validate arguments and generate keyframe in such a way that they will always have a valid CSS name for all effects, transitions and arguments passed in.

## 📄  All changes

* 💥  foundation#103 - Make transitions/effects directions depending on in/out state (@ncoden, closes foundation#83)
* 💥  foundation#108 - Change mui-series paused behavior for better Safari support (@ncoden, closes foundation#97)
* 🐛  foundation#100 - Fix deprecation warning for Sass 4.0 (@rediris, closes foundation#99)
* 🐛  foundation#102 - Make animation keyframes names safe for CSS (@ncoden, closes foundation#96)
* 🐛  foundation#109 - Ensure `-mui-keyframe-pct` returns a strintg instead of a list (@ncoden, closes foundation#109)
* 💻  foundation#110 - Update development dependencies to latest versions (@ncoden)
* 💻  foundation#112 - Ensure support of iOS Safari 7 and drop support for Android browser 2.3 (@ncoden)
* 💻  foundation#111 - Add Travis to run tests on `node-sass` 3/4/latest (@ncoden)
* 📖  foundation#94  - Fix parameter name for zoom animation (@cmarchena)

## 👩‍💻  Contributors

Thank you to the amazing people who contributed to this release:
* Carlos Marchena (@cmarchena)
* Kevin Ball (@kball)
* Nicolas Coden (@ncoden)
* Roman Edirisinghe (@rediris)
ncoden added a commit to ncoden/motion-ui that referenced this issue May 21, 2018
We're happy to release Motion UI 2.0 with a better support of macOS Safari, API improvements, some bug fixes and various maintanance stuff.

We changed the default direction of all transition and effect mixins so it depends on the `in` or `out` state. Calling the same mixin with `in` and `out` states now results in the same animation playing forward and backward.

💥 **BREAKING CHANGE**. We changed the effects and transitions API the following way:
* All direction-related options now have opposite values as defauls according to the `in` or `out` state.
* The `slide` effect defaults are now `left` and `right` (according to `$state`) for consistency with the `slide` transition.
* The `zoom` transition and effect defaults are now `0` and `1` (according to `$state`) for consistency with others transitions defaults.

For the `hinge`, `slide`, `spin`, `zoom` effect functions and `mui-fade`, `mui-hinge`, `mui-slide`, `mui-spin`, `mui-zoom` transition mixins: if `$state: out` is used and no direction parameters are given, manually pass the "forward" parameters to keep them playing forward.

```scss
// Before
@include mui-fade($state: out /*, $from: 0, $to: 1*/);
// After
@include mui-fade($state: out, $from: 0, $to: 1);
```

For the `slide` effect function: if no `$direction` is given, manually pass `$direction: up` to keep the effect sliding to top instead of the new default `left`/`right`.

```scss
// Before
$effect: slide(/* $direction: up */);
// After
$effect: slide($direction: up);
```

For the `mui-zoom` transition mixin: if no `$from` or `$to` are given, manually pass `$from: 1.5` and `$to: 1` to keep the previous behavior.

```scss
// Before
@include mui-zoom(/* $from: 1.5, $to: 1 */);
// After
@include mui-zoom($from: 1.5, $to: 1);
```

With the previous `mui-series` behavior, the serie was paused until the `.is-animating` class was added. Unfortately, the implementation behind this did not work on all macOS Safari versions and was even breaking the whole animation. In order to fully support macOS Safari, we changed the `mui-series` paused
behavior and introduced `.is-paused`.

💥 **BREAKING CHANGE**: When `.is-animating` is removed from `.mui-series`, the queue is now reset instead of paused. Setting `.is-animating` back will start the queue from its begining.

From now you can:
* **Start** the queue by adding `.is-animating`
* **Pause** the queue by adding `.is-paused`
* **Continue** the queue by removing `.is-paused`
* **Reset** the queue by removing `.is-animating`

If you need an animation to pause midway, add `.is-paused` instead of removing `.is-animating`. For example in jQuery:

```js
// Before
function play($elem) {
  $elem.addClass('is-animating');
}
function pause($elem) {
  $elem.removeClass('is-animating');
}

// After
function play($elem) {
  $elem.addClass('is-animating').removeClass('is-paused');
}
function pause($elem) {
  $elem.addClass('is-paused');
}
function reset($elem) {
  $elem.removeClass('is-animating is-paused');
}
```

As a side-effect of this, standard animations names are not supported anymore as `mui-series` queues names. Make sure you use unique names for your `mui-series` queues.

```scss
// Before
@include mui-series {
  .shake          { @include mui-queue(3s, 0s, shake); }
  .spin           { @include mui-queue(3s, 0s, spin); }
}

// After
@include mui-series {
  .my-serie-shake { @include mui-queue(3s, 0s, shake); }
  .my-serie-spin  { @include mui-queue(3s, 0s, spin); }
}
```

Fixes a bug when using decimals values for the `zoom` effect and transition arguments would generate an invalid CSS Keyframes name and break the animation.

We changed the way we validate arguments and generate keyframe in such a way that they will always have a valid CSS name for all effects, transitions and arguments passed in.

* 💥  foundation#103 - Make transitions/effects directions depending on in/out state (@ncoden, closes foundation#83)
* 💥  foundation#108 - Change mui-series paused behavior for better Safari support (@ncoden, closes foundation#97)
* 🐛  foundation#100 - Fix deprecation warning for Sass 4.0 (@rediris, closes foundation#99)
* 🐛  foundation#102 - Make animation keyframes names safe for CSS (@ncoden, closes foundation#96)
* 🐛  foundation#109 - Ensure `-mui-keyframe-pct` returns a strintg instead of a list (@ncoden, closes foundation#109)
* 💻  foundation#110 - Update development dependencies to latest versions (@ncoden)
* 💻  foundation#112 - Ensure support of iOS Safari 7 and drop support for Android browser 2.3 (@ncoden)
* 💻  foundation#111 - Add Travis to run tests on `node-sass` 3/4/latest (@ncoden)
* 📖  foundation#94  - Fix parameter name for zoom animation (@cmarchena)

Thank you to the amazing people who contributed to this release:
* Carlos Marchena (@cmarchena)
* Kevin Ball (@kball)
* Nicolas Coden (@ncoden)
* Roman Edirisinghe (@rediris)
@ncoden ncoden mentioned this issue May 21, 2018
4 tasks
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

8 participants