21

I am playing around with CSS-animated SVG elements and came across the problem that even though all technologies, which are used, are supported by some browsers the combination is not, i.e. CSS-animated DIVs work but SVG elements don't. I am wondering if there is a way to detect if a browser is capable of animating SVG elements using CSS.

Here is a jsFiddle with an example. It works in the latest versions of Chrome, Firefox and Safari. But when opening it with e.g. Firefox 5 only the div rotates while the rect doesn't.

F Lekschas
  • 12,481
  • 10
  • 60
  • 72
  • 1
    Have you tried to investigate [Modernizr](http://modernizr.com/) for that purpose? – robjez Jul 22 '15 at 15:51
  • I haven't found any test that checks whether CSS animations are working with SVGs. – F Lekschas Jul 22 '15 at 15:54
  • @robjez I just looked as well and didn't see any way to detect if CSS animations works with SVG either. This is good question. F Lekschas, did you ever figure this out? – JKillian Sep 14 '15 at 19:50
  • @JKillian Unfortunately I haven't found anything. – F Lekschas Sep 14 '15 at 19:59
  • Too bad. Going to add a bounty to the question for the fun of it – JKillian Sep 14 '15 at 21:17
  • 2
    There is an [issue](https://github.com/Modernizr/Modernizr/issues/1453) on the Modernizr repo. – Alex Palcuie Sep 16 '15 at 07:58
  • 1
    it's probably more an issue about supporting transform property ; – maioman Sep 16 '15 at 09:42
  • @maioman You're right, see http://jsfiddle.net/x4go2uaL/ in IE11 and https://connect.microsoft.com/IE/feedback/details/811744/ie11-bug-with-implementation-of-css-transforms-in-svg. Any interest in editing the question a little F Lekschas? – JKillian Sep 16 '15 at 16:04
  • I think the question is pretty clear. Also, your example doesn't work in FF5 even though FF5 is able to animate a `DIV` using the same piece of CSS. https://jsfiddle.net/v1oh3d99/2/ So it's not only an issue about transform. – F Lekschas Sep 16 '15 at 17:49
  • Good point. Seems like it's a multi-sided issue then – JKillian Sep 16 '15 at 18:21
  • does animating through ` ` work on FF5 (it should) ? – maioman Sep 16 '15 at 20:13
  • I belive the process to check support would be pretty complicated and I think most modern browsers support svg animations, so maybe you could just do a browser version check and return the svg animation or the ugly div one. – mihaidp Sep 18 '15 at 12:28

4 Answers4

1

I am wondering if there is a way to detect if a browser is capable of animating SVG elements using CSS

Simple Answer: Yes you can as stated by @jhpratt.

You can detect if a browser supports CSS-Functionality with only CSS. The @supports CSS at-rule lets you specify declarations that depend on a browser's support for one or more specific CSS features. This is called a feature query.

Example: 

@supports (display: flex) {
  div {
    display: flex;
  }
}
@supports not (display: flex) {
  div {
    float: right;
  }
}

MDN Link: https://developer.mozilla.org/de/docs/Web/CSS/@supports

Long Answer:

You will always have some cross-browser issues. The problem you have encountered is bothering every Webdeveloper. Still there are ways to get around with this Browser-Support-Problem:

1. You can check "can I use" for compatibility:

Link: http://caniuse.com/ It is recommend to look up any functionality which is questionable like animations.

2. Use an autoprefixer in your workflow:

With the help of an autoprefixer you don't have to worry most of the time about using CSS with a prefix like -moz-, -webkit-, etc. This tiny helper will do the trick for you, you can even tell some autoprefixers which browsers you want to support.

3. User 3rd - Party libraries:

There are many libraries out there which you can use to detect the browser and version. If you want to be sure that your animation is secure to use, you can simply use the provided animation from the libraries and of course look the compatibility up before on their respective websites.

Some Big Names:

there are many more, jsut search the world wide web.

4. Use CSS Hacks to detect specific Browsers:

It is possible to use so called CSS-Hacks. They are specific CSS calls, which only apply on certain browsers.

Some examples:

Internet Explorer/Edge 8 only: @media \0screen {}

firefox ≥ 3.6 only: @media screen and (-moz-images-in-menus:0) {}

Opera ≤ 9.27 AND Safari 2: html:first-child .selector {}

You can look up more Browserhacks here: http://browserhacks.com/

Conclusion:

It is possible to detect specific browsers, but it is not possible to detect if the brwoser is supporting the given feature with only CSS. That is why you will always have some hard times with browser support.

Hope this helps. Regards

Megajin
  • 2,648
  • 2
  • 25
  • 44
  • 1
    Note that you can absolutely check if a feature is supported in CSS only. It's the `@supports` rule, and is widely supported. – jhpratt Jan 05 '18 at 02:04
  • 1
    Those are all great tips in general but do you have a specific example where any of this helps to detect CSS animation support for SVG elements? – F Lekschas Dec 13 '18 at 15:12
  • @FLekschas do you want to create a kind of a test to automate your check? Or do you just want to be sure that an animation will work and if not have an alternative? Whatever it is you can simply check it here: https://developer.mozilla.org/en-US/docs/Web/CSS/@supports#Examples – Megajin Dec 20 '18 at 12:44
1

You can add an event listener to check for the completion of an animation iteration, and within the corresponding event handler set a flag like supportsSVGKeyFramedAnimatedProps = true (if the iteration never completes then it is not animating).

elem.addEventListener('animationiteration', eventHandler, false)

This would allow you to 'fall forward' to your SVG animation, instead of providing a fallback.

amigolargo
  • 800
  • 2
  • 7
  • 24
  • Not sure what you mean with "fall forward" as I would fallback to SMIL probably but the idea is neat! I would probably use `animationstart` though as that should only trigger once. – F Lekschas Dec 13 '18 at 15:39
0

I believe that the SMIL animations detections in modernizr should do it. https://modernizr.com/download?smil-setclasses

I'm using it in a pretty involved set of css/SVG chart animations. Just wrap a fallback in the following tag:

.no-smil{    }

http://codepen.io/msbtterswrth/pen/greWzy

Lynn Stahl
  • 174
  • 1
  • 6
  • 2
    This question is about CSS-based SVG animations not SMIL-based animations. – F Lekschas May 05 '16 at 19:51
  • 1
    i know, but i've had success in using that test for css animations as well. I had the same issue, where i could not get my svgs to transform in certain browsers and this test helped me to successfully detect those and code around them. – Lynn Stahl May 05 '16 at 19:58
-1

I haven't done exactly what you're looking for, but something similar (providing an animated clip-path as defined by SVG when the browser supports it and falling back when it doesn't). You can use media queries looking for pixel ratios to determine if a broswer is moz or webkit and provide the fallback animation outside the media query and provide the preferred animation in media queries that indicate a browser that will support it.

//fallback animation here

@media (-webkit-min-device-pixel-ratio: 0) {
  // webkit animation here 
}

As for older versions of Firefox? I don't know how to do that in CSS, but I'm not sure going back more than a few versions of Firefox or Chrome is a common use case.

Jon Swanson
  • 102
  • 4
  • The point of my question isn't really to figure out how to support one specific browser such as FF5. I am curious if someone knows a way to generally check for CSS-based SVG animation support across browser. – F Lekschas May 05 '16 at 21:17