0

I've been designing the web page for the company I work for and found something unusual so I hope anyone know what's causing it. I was stuck for a day trying to find out why when I compiled my Angular proyect with poduction=true, the mayority of the CSS animations broke down. Today, I managed to find what was the source of the problem. The problem was that my dev compilation had "buildOptimizer": false and "optimization": false in angular.json, so I added it to the production build configuration and everything started working again. My question is, why is this happening? Why is the Angular optimization breaking all the CSS animations?

This happens in all the browsers and devices I checked with (my M1 Mac in Chrome and Safari, my Intel iMac with Chrome and Safari, my iPad and iPhone in Chrome and Safari, an Intel Windows VM in Chorme and Edge and my Raspberry Pi in Firefox), so its not a browser compatibility thing.

Thank you!

Eduardo Font
  • 71
  • 1
  • 7
  • could you provide keyframes of the animation that is broken? I think you are trying to animate something like svg x or y properties – Andrei May 07 '23 at 12:29
  • simillar [issue](https://stackoverflow.com/questions/52300779/angular-css3-keyframes-for-animations) – Andrei May 07 '23 at 12:59
  • Specifically, I'm trying to animate the Bootstrap 5.2 carousel. I have two of them in the page, and one is modified to have multiple images. The thing is that niether one display the slide animation when I compile with optimizations... – Eduardo Font May 08 '23 at 03:54

0 Answers0