The animation of flex in Angular 5+ is not functioning properly on Firefox

I am currently diving into the world of Angular animations and I successfully created a smooth animation that works perfectly on Chrome. However, it seems to be encountering some issues on Firefox resulting in a frustrating bug that prevents the view from refreshing.

One workaround is to eliminate the width, flex, and padding properties from the cardAnimation which may be triggering the issue. I am open to exploring better approaches to achieve the desired animation effect, especially since it needs to work with an array where items are dynamically added and removed.

If anyone has any suggestions or insights, feel free to check out the stack here: https://stackblitz.com/edit/angular-flex-animate-firefox

Thank you in advance.

cssangulartwitter-bootstrapangular5angular-animations

Answer №1

Firefox has a problem with the web animations api when using css shorthands like margin, padding, border-width, flex, and others. It seems that Firefox is unable to calculate the style of these shorthands, resulting in an inability to animate them.

The workaround is to fully expand all the css shorthands utilized in the animation. For example:

padding: 0;

needs to be rewritten as:

padding-top: 0;
padding-right: 0;
padding-bottom: 0;
padding-left: 0;

Expanding the shorthands such as padding and flex within your animation will ensure proper functionality in Firefox.

Check out the code in action here: https://stackblitz.com/edit/angular-flex-animate-firefox-svrwtp

Source: https://github.com/angular/angular/issues/10420

Answer №2

In case your code leverages AnimationBuilder, remember to un-comment the web-animations-js polyfill in the polyfills.ts file created by Angular CLI.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

I recently upgraded my Angular version from 5 to 8, and encountered an unexpected error with the toastr plugin

I recently upgraded my Angular version from 5 to 8 and encountered an issue. Upon starting the server with 'ng serve', I received the following error in the console: Uncaught TypeError: core_1.style is not a function at Object../node_modules/ng ...

angular

Angular 15: Utilizing the Mat Slider Component for Dynamic Value Adjust

This particular code worked perfectly fine in Angular 14, but unfortunately it seems to have compatibility issues with Angular 15. <mat-slider min="1" max="150" step="10" ...

javascripthtmlangularangular-materialangular15

Animating components in React: A step-by-step guide to smoothly transition between rendered components

I am implementing a feature where a component changes at regular time intervals. Is there a way to incorporate an animation each time this change occurs? What would be the most effective approach? constructor (props) { super(props) this.state = { ...

javascriptcssreactjsanimation

Utilizing BEM Class Names in React

How can I utilize the Post component in a way that assigns unique classes to new and old posts following BEM recommendations? Assign a unique className to every element Avoid cascading dependencies like (.posts-new post or .posts-old post) Each component ...

javascriptcssreactjs

What is the best way to stream a response using both Express and Angular?

How can I establish a data stream between Express and Angular to ensure that partial responses from Express are processed in Angular without delay? Currently, the response only sends complete information to the frontend, but I need continuous communication ...

angularexpress

Dragging element position updated

After implementing a ngFor loop in my component to render multiple CdkDrag elements from an array, I encountered the issue of their positions updating when deleting one element and splicing the array. Is there a way to prevent this unwanted position update ...

angulartypescriptdrag-and-dropangular-materialangular-cdk

Avoiding the overflow of the y-axis by applying a slight left margin to bootstrap columns

Context: I'm in the process of developing a collapsible sidebar navigation menu inspired by the bootstrap admin panel example found at: Issue: Upon collapsing the admin bar, a small bar of icons appears. To accommodate this, I added margin-left: 50 ...

htmlcsstwitter-bootstraptwitter-bootstrap-3bootstrap-4

What could be causing my page to appear at different heights in Safari and Firefox compared to Chrome?

I've been working on www.rootologyhealth.com and I'm stumped by the strange behavior of the Nav Bar on the homepage. It's positioned too high in Safari and Firefox, but appears perfectly in Chrome. Despite my efforts to troubleshoot, I can&a ...

cssgoogle-chromesafaricross-browser

Building interactive forms with jQuery and Bootstrap that fetch data remotely

Utilizing bootstrap/jquery, I am dynamically adding rows with dynamic fields to a form at runtime, in addition to the static fields. I referred to formvalidation.io for guidance. The initial row is static while the subsequent rows are dynamic. To achieve t ...

javascriptjqueryajaxtwitter-bootstrap

What is the best way to create a scrollable Material UI modal and dialog?

Having a problem with my mui modal where the top content is getting cut off and I can't scroll up. I've tried adding the {overflow:"scroll"} property to the modal but it's not working. Here's the code snippet I'm currentl ...

javascriptcssreactjsmaterial-ui

Uploading files in Angular 5 with additional properties of other objects

I am facing a challenge with uploading a file as part of a property to an object within a form. Most documentations I have come across only focus on services that handle standalone files. In my case, I have a form with various text inputs and date pickers, ...

angulartypescriptasp.net-core-webaping-file-upload

ngx-text-diff is failing to update when I programmatically insert HTML attributes

Currently, I am utilizing an npm package called ngx-text-diff to create a file content comparator with great success. After importing its component and ensuring it functions correctly, I encountered an issue. The HTML selector requires two arguments - &apo ...

angular

How can I remove the div container every time the submit button is clicked?

I am currently working on a form that is capturing values as shown below. <form role="form" id="calculate"> <div class="form-group"> <select class="form-control" id="paper"> < ...

javascripthtmlcss

Hot Module Replacement loop restarts with .Net Core version 2.1.2 and Angular 6 in the presence of enabled Https

To implement HTTPS on .Net Core 2.1.2, I made the following changes: //https app.UseHttpsRedirection(); app.UseHsts(); After that, I activated the SSL option in my project's properties under the "debug" tab. Everything was f ...

angularasp.net-core

Maintain visibility of the vertical scroll bar while scrolling horizontally

Currently, I am in the process of setting up a table with fixed headers and columns that have a minimum width. To ensure this setup functions correctly, I require both vertical and horizontal scroll bars. The vertical scroll bar should only navigate throu ...

htmlcsshtml-table

Navigating through Firebase after login

Encountering an issue with navigating to the register page using a firebase authentication promise. Instead of displaying only the register page, both the login page and register page are shown simultaneously: Login page with social buttons Register page ...

angularfirebasefirebase-authenticationangular-materialangular-router

Customizing the default image of a Select dropdown field in Sencha Touch

Does anyone know how to change the default image of a select dropdown in Sencha Touch to a customized image? I've attached a screenshot for reference but can't seem to find any properties or classes to adjust this. Any guidance would be greatly a ...

javascriptcsshtmlsencha-touchsencha-touch-2

Efficient methods to transfer values or arrays between components in Angular 8 without relying on local storage

I am working on a project that involves two components: a login component and a home component. I need to pass user data from the login component to the home component without using local storage. Is there a way to achieve this in Angular 8? Below is the ...

angulartypescript

jQuery unable to target Bootstrap button

I've been experiencing some trouble trying to attach a listener to a button I made with Bootstrap. <button type="button" id="buttonone" class="btn btn-default btn-lg good"> <span class="glyphicon glyphicon-minus" aria-hidden="true">< ...

javascriptjqueryhtmlcsstwitter-bootstrap

Verify web connectivity in an Angular2 (non-Ionic) Cordova application

Our team has developed an Angular2 Cordova application (not Ionic) that interacts with multiple backend services. We want the app to display a specific page (Component) if a user is offline. Although we have already created this feature, we are unsure of ...

cordovaangulartypescript