SOLVED

How can I disable the animations associated with the <progress> element?

%3CLINGO-SUB%20id%3D%22lingo-sub-1497277%22%20slang%3D%22en-US%22%3EHow%20can%20I%20disable%20the%20animations%20associated%20with%20the%20%3CPROGRESS%3E%20element%3F%3C%2FPROGRESS%3E%3CLINGO-BODY%20id%3D%22lingo-body-1497277%22%20slang%3D%22en-US%22%3E%3CP%3EThis%20happens%20with%20IE%2FEdge%2C%20and%20no%20other%20browsers%2C%20but%20it%20seems%20that%20IE%2FEdge%20has%20some%20native%20animation%2Finterpolation%20behavior%20when%20using%20progress%20elements%20that%20are%20continually%20updated.%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EHow%20can%20I%20disable%20this%3F%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EI%20have%20a%20very%20fast%20moving%20progress%20bar%2C%20that%20resets%20to%200%20frequently%2C%20and%20increases%20again.%26nbsp%3B%26nbsp%3B%3CBR%20%2F%3E%3CBR%20%2F%3EThe%20built-in%20animation%2Finterpolation%20makes%20this%20broken%20on%20Edge%2C%20but%20looks%20correct%20on%20_any%20other%20browser_.%26nbsp%3B%20Note%20that%20no%20other%20browsers%20have%20built%20in%20animation.%26nbsp%3B%26nbsp%3B%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EIt%20looks%20like%20the%20progress%20bar%20decreases%20when%20it%20wraps%20around%2C%20and%20it%20cases%20the%20bar%20to%20jump%20around%20weirdly.%26nbsp%3B%20There's%20like%20some%2010%20frame%20interpolation%20that%20adds%20behavior%20to%20the%20bar%20that%20doesn't%20benefit%20all%20situations.%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3ENot%20sure%20what%20Microsoft%20is%20thinking%20here%3F%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3ECan%20we%20please%20have%20a%20way%20to%20disable%20this%3F%3CBR%20%2F%3E%3CBR%20%2F%3EHere's%20a%20fiddle%20to%20see%20what%20I'm%20talking%20about.%26nbsp%3B%20Notice%20on%20Edge%20how%20it%20animates%20between%20each%20update%3F%26nbsp%3B%20And%20when%20it%20resets%20to%20zero%2C%20it%20actually%20seems%20like%20it's%20decreasing%20rather%20than...%20just%20being%20zero.%3CBR%20%2F%3E%3CA%20href%3D%22https%3A%2F%2Fjsfiddle.net%2F0twdL27y%2F10%2F%22%20target%3D%22_blank%22%20rel%3D%22nofollow%20noopener%20noreferrer%20noopener%20noreferrer%20noopener%20noreferrer%22%3Ehttps%3A%2F%2Fjsfiddle.net%2F0twdL27y%2F10%2F%3C%2FA%3E%3C%2FP%3E%3C%2FLINGO-BODY%3E%3C%2FLINGO-SUB%3E%3CLINGO-SUB%20id%3D%22lingo-sub-1497299%22%20slang%3D%22en-US%22%3ERe%3A%20How%20can%20I%20disable%20the%20animations%20associated%20with%20the%20%3CPROGRESS%3E%20element%3F%3C%2FPROGRESS%3E%3CLINGO-BODY%20id%3D%22lingo-body-1497299%22%20slang%3D%22en-US%22%3EAnd...%20just%20found%20out%20that%20this%20is%20actually%20solved%20with%20the%20latest%20version%20of%20Edge%20(or%20let%20your%20PC%20do%20another%20update).%3CBR%20%2F%3E%3CBR%20%2F%3ESigh!%20Wasted%20too%20much%20time%20with%20that!%3C%2FLINGO-BODY%3E%3C%2FLINGO-SUB%3E
Highlighted
New Contributor

This happens with IE/Edge, and no other browsers, but it seems that IE/Edge has some native animation/interpolation behavior when using progress elements that are continually updated.

 

How can I disable this?

 

I have a very fast moving progress bar, that resets to 0 frequently, and increases again.  

The built-in animation/interpolation makes this broken on Edge, but looks correct on _any other browser_.  Note that no other browsers have built in animation.  

 

It looks like the progress bar decreases when it wraps around, and it cases the bar to jump around weirdly.  There's like some 10 frame interpolation that adds behavior to the bar that doesn't benefit all situations.

 

Not sure what Microsoft is thinking here?

 

Can we please have a way to disable this?

Here's a fiddle to see what I'm talking about.  Notice on Edge how it animates between each update?  And when it resets to zero, it actually seems like it's decreasing rather than... just being zero.
https://jsfiddle.net/0twdL27y/10/

1 Reply
Highlighted
Best Response confirmed by wattro (New Contributor)
Solution
And... just found out that this is actually solved with the latest version of Edge (or let your PC do another update).

Sigh! Wasted too much time with that!