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
Comments
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. |
Yes, this is pretty annoying. |
Will motion-ui be further developped by zurb? Last code commits are 2 years old. Will this Safari problem be solved in future? |
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. |
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 ? |
I am able to reproduce it. See https://codepen.io/ncoden/pen/wmNvWG |
So this comes at least from a bug with 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, A solution would be to use the same approach as animate.css and only apply
Poke @eltonmesquita @daneden @WarenGonzagaOfficial What do you think ? Were you aware of this bug at animate.css ? |
See also: http://elrumordelaluz.github.io/csshake/#1
|
Poke @SassNinja. I don't know how to resolve this. Could you help me here ? |
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. |
I've tested the minimalist codepen (https://codepen.io/ncoden/pen/QmYLzy) on iPhone 6 with
In each case the animation can't be paused and gets somehow reset on click (depending on when you click). Afterwards I've tested the 'Series Animations' section of this page on the devices
@ncoden why exactly did you test
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? |
Sorry, I meant |
So your codepen https://codepen.io/ncoden/pen/QmYLzy doesn't work for you on macOS Safari 11?
Alright, but anyway similar to what I imagined regarding .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. UPDATE Tested the duration solution on iPhone (iOS 11.3) now: doesn't work either :/ |
Did you opened the debug mode in a new window ? The animation works when embeded in an inframe or after refreshing the page.
No, i meant: .animation {
/* nothing */
}
.animation.is-animating {
animation-duration: 5s;
}
Yes it is, as explained in #97 (comment):
It's the way others animation frameworks works: applying |
Strange it also works for me in debug mode – no difference.
I'm afraid I haven't got it yet. Just to be sure we're talking about the same thing. |
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. Also:
See: |
Really odd behavior (why does it work after page refresh?!) but I was able to reproduce by following your steps.
Thanks for the pens!
So the duration solution seems indeed to be the best/only cross browser solution. 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? |
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 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. |
I'll go for a mixed approach: making "reset" the default behavior when So we favour a large compatibility but still allow to use the old behavior. |
Right, there seems to be no real alternative to
That sounds as the best solution to me. |
Ok I got this working with a way more complicated workaround:
The downside is the same: the animation cannot be paused but only reset. I'll do some cleaning and create a PR tonigh. |
Poke @hugogiraudel, your help on this issue would be very helpful and much appreciated 😉 |
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
Allow to enforce the previous paused behavior with a "mui-pause" modifier on `mui-series` elements. See foundation#97
I'm late for the party but here are my 2 cents on the issue: 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. |
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 ( 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.
You're right. |
Actually I think I found a way better fix: Safari supports So we could have the following behavior:
And we have:
I'll make some tests and open a PR. I hope it will work as like imagined it. |
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
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)
It works. Play, pause and reset is now availaible on all browsers. See #108 |
feat: change mui-series pause behavior & add `.is-paused` for Safari support #97
# 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)
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)
Any mui-series animations seem to fail in Safari 11, including the Motion UI landing page
The text was updated successfully, but these errors were encountered: