borderRadius property doesn't work in Firefox about anime HOT 12 CLOSED

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.

from anime.

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

from anime.

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

from anime.

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

from anime.

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

from anime.

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?

from anime.

Still not resolved :(

from anime.

Working perfectly.

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

from anime.

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

from anime.

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
});

from anime.

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

⁣

from anime.

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

from anime.