animating the value attribute of the progress element in Edge

[matt lohkamp]

This is easy to reproduce: in chrome and firefox, the bar fills up as the progress value attribute tweens from 0 to 100.

 

On edge, the bar stays blank, until the tween finishes and the bar suddenly catches up.

 

**edit** - I've been able to create similar behavior using a requestAnimationFrame loop - it seems like the commands to change the element value are stacking up, somehow, so that their execution is being delayed, at least visually, until they reach some kind of critical mass. Continuously logging the progress value to the console shows that the value is being incremented properly, but the progress element is clearly not being re-rendered to reflect this in sync. Makes it seem like this might be an IE/Edge specific bug.

See the Pen QvjjoM by mattlohkamp (@mattlohkamp) on CodePen.

[GreenSock]

Technically, that's an attribute (not a property or CSS value), so you should probably use the AttrPlugin:

TweenMax.to(progress,5,{
  attr:{value:100},
  ease:Linear.easeNone
});

Better?