Ionic animations not working on iOS

Ionic Framework Ionic Angular
1

I have made a simple animation like the Simon Grimm tutorial, on Android it works perfectly but on iOS both in the emulator and in a real device it does nothing.
My problem is that there does not appear to be any error in the code or that the animation is not loading.
It seems that everything is correct but the animation simply does not fire.

I leave my code here

`
@ViewChild(‘warning’, { read: ElementRef }) icon: ElementRef;
anim: Animation;

ngAfterViewInit() {
	this.anim = this.animationCtrl.create()
	.addElement(this.icon.nativeElement)
	.duration(2000)
	.iterations(Infinity)
	.keyframes([
	  { offset: 0, color: 'var(--ion-color-danger)' },
	  { offset: 0.6, color: 'var(--ion-color-primary)' },
	  { offset: 1, color: 'var(--ion-color-danger)' },
	]);
	this.anim.play();
}`

Ionic: 6.12.4
angular: 11.1.2
cordova: 10.0.0
ionic/angular: 5.5.4
cordova-ios: 6.2.0

iOS 14.4

2

What version of iOS are you testing this on?

3

I have added more information, but my iOS version is 14.4

4

Can you send a GitHub repo with this issue happening?

5
  • ionic repair
  • ionic cordova prepare ios
  • open platfomr/ios/workspace sing and close xcode
  • ionic cordova build ios
  • open platform/ios/workspace and play

Maybe I have forgotten to import some essential library for animations but in principle, according to the guides, everything is correct

6

The problem is with the color="primary" property on your ion-icon as it is taking precedence over the animations color change. Removing color="primary" fixed the issue on my end.

7

I wish it had worked but no, removing the property color="primary" nothing happens, the animation does not play in either the emulator or the device.
I still think that it is some other type of problem since this works on Android.
Maybe if you shared a repository with me with a test that would work with some other animation I would have to contrast.
Thanks in advance for the help.

8

Looks like it may be a bug in WebKit (the engine that powers Safari). I tried using the Web Animations API directly and it does not seem to animate SVG colors properly.

9

Well then I wait you to do some testing or should I report this like a bug?

10

If you are looking to report this to the WebKit team, I recommend doing a quick search on their bug reporter site to see if it has already been reported: https://bugs.webkit.org/