Anime: borderRadius property doesn't work in Firefox

[canova]

I was looking to examples on Codepen and found out that borderRadius property is not working in Firefox. But working fine in Chrome. Codepen Link
Firefox version: 47

Screenshot in Firefox:

Screenshot in Chrome:

[insanepl]

Got the same problem with Edge and even IE11, I don't even see border-radius property in DOM, just transform.

[averyillson]

Are you using the -moz- prefix in the css?

[canova]

@averyillson The javascript is dynamically creating the border-radius, it is not related to css file. Also Firefox doesn't use -moz- prefix for border-radius since Firefox 4.

[juliangarnier]

It's because getComputedStyle(div).getPropertyValue('border-radius') doesn't return anything on IE / FF;

Not sure if it's a browser bug or something else :
http://codepen.io/juliangarnier/pen/BzWmGx?editors=0111

Any ideas?

[canova]

I found a SO question and it seems Firefox require a specific corner to get property value.
Working code:
http://codepen.io/canaltinova/pen/JKWMPR?editors=1111
SO link:
http://stackoverflow.com/questions/10803023/why-wont-getpropertyvalue-return-a-value-for-the-borderradius-property

[juliangarnier]

Ok thanks!
I think I'll change the way CSS animation is detected, and fallback to a value of 0 for properties that are not supported by getComputedStyle.

Will check this asap.

[seleckis]

Still not resolved :(

[juliangarnier]

Working perfectly.

https://codepen.io/juliangarnier/pen/3a940ac85e26d7303a34b5c270cb8035

[seleckis]

No, it is not: https://codepen.io/seleckis/pen/ZamqJp

[juliangarnier]

As @canaltinova said, Firefox always returns 0 when using borderRadius.
In your example, you have to specify the initial value like this:

anime({
  targets: 'div',
  borderRadius: ['80px', '0px'],
  direction: 'alternate',
  loop: true
});

Or if you really can't specify the initial value, you can also do this 😂

anime({
  targets: 'div',
  borderTopLeftRadius: 0,
  borderTopRightRadius: 0,
  borderBottomRightRadius: 0,
  borderBottomLeftRadius: 0,
  direction: 'alternate',
  loop: true
});

[seleckis]

I see. But documentation is still confusing newbies. There is an example which does not work in FF.

⁣

[juliangarnier]

Ah good catch! I forgot to update the doc.
Will do in the next release.
Thanks!