CSS Animations as default animation

is it possible to set CSS Animations as default instead of Web Animations API?
It is stated here - https://ionicframework.com/docs/utilities/animations#overview that CSS animations are used as a fallback
asking this because of incompatibility of Web Animations API with third party product for screen recording
thanks for any reply/ideas

The Ionic Animations utility will automatically fall back to CSS Animations in environments that do not support Web Animations. What is the incompatibility you are running into?

Hi, we are using Fullstory to record and analyze user behavior in our app prototype. But modals are not showing on the recording because of use of Web Animations API (as stated by the member of Fullstory support team). I have tried to disable the animations, but my investigation showed that web animations API is still used.

Are you able to provide an example? I would be interested in finding a way to get this to work.

For now, you could trick Ionic Animations by setting Element.prototype.animate = null in your code. This is a hack, so I would recommend this only as a temporary workaround.

Thanks, i will try that!

what kind of example do you mean? Fullstory recording or access to our prototype? I can send it to you by email or somehow.

1 Like

A video of the issue happening would be helpful. You can send it to liam [at] ionic.io. I am mostly interested in finding out how to reproduce this on my end. From there I can determine the best way to get this issue resolved.

Made it work by doing this

Element.prototype.animate = function() { return new Animation(null, null) }

and overriding some styles:

ion-modal .modal-wrapper, ion-action-sheet .action-sheet-wrapper {
    transform: none !important;
}

ion-action-sheet.sc-ion-action-sheet-ios-h{
    background-color: rgba(0, 0, 0, 0.4);
}

That workaround didn’t work for me :confused: it winds up rendering in a browser the same way it previously did in Fullstory (modals invisible). Has anyone gotten it to work with ionic/react? I hope it wouldn’t make a difference.

We were able to get a modal to show up without any animation using the JS part of the workaround and this for CSS:

ion-modal .modal-wrapper, ion-action-sheet .action-sheet-wrapper {
  /* transform: none !important; */
  opacity: inherit !important;
}
ion-action-sheet.sc-ion-action-sheet-ios-h{
  background-color: rgba(0, 0, 0, 0.4);
}

And then applying opacity: inherit to the modal, but even that doesn’t work for action sheets and whatnot.