Bootstrap: v4 - Progress bar animations don't work in all browsers

[zacechola]

http://v4-alpha.getbootstrap.com/components/progress/#animated-stripes

Test case: http://jsbin.com/gelazu/edit?html,output

Works

• Safari

Doesn't work

• Chrome
• Firefox

Haven't Checked

• Any version of IE
• Any versions of Chrome mobile

Also, looks like the toggle button on the docs doesn't add the .progress-animated class to the <progress> element.

[kkirsche]

@zacechola doesn't work for me in Safari Version 8.0.8 (10600.8.9) on Mac OS X 10.10.5

It doesn't work because the button doesn't add .progress-animated for me... Sorry

[hnrch02]

I think the problem is that the keyframe definition doesn't carry over to the Shadow DOM. cc @mdo Edit: That would also explain why they work in Safari, since WebKit removed their Shadow DOM implementation.

[mdo]

Yeah, for it to work, we'll need to go back to .progress on <div>s or the like.

[mdo]

We can likely support both, just need to revisit some of those styles.

[splattne]

Animation doesn't work in Safari 9 either.

[wolfy1339]

Doesn't work on Edge

[0xcaff]

You can workaround this by animating the progress bars with jQuery manually.

$("#progressbar")
  .animate({
    "width": data["percent"]+"%"
  }, {
    duration: 600,
    easing: 'linear'
  });

[patrickhlauke]

Is this still an issue following https://github.com/twbs/bootstrap/pull/18531 ? (travelling just now, so now way to check locally)

[zacechola]

I just pulled the latest from v4-dev to take a look, @patrickhlauke but there's a separate issue in the build causing a syntax error with jQuery. I'll have more time later today to look, I think.

[flyingangel]

Still seems not to work even in doc page http://v4-alpha.getbootstrap.com/components/progress/
Chrome v52

[kevnk]

I'm seeing the same as @flyingangel: screen video

[svinci]

Hey guys, sorry to bother. Do we have an ETA on this going out?

[bardiharborow]

Confirming that the documentation example is still broken in Chrome 55, Firefox 51 and Safari 10. The relevant Chromium issue is closed as WontFix.

[davhdavh]

Seems like it was broken in FF and Chrome due to security concerns. So that makes the progress elements pretty useless.

[bardiharborow]

I've looked into a number of workarounds, including overlaying a custom bar with ::before (which won't work as <progress> is a replaced element) and read up on the intricacies of shadow DOM, but it hasn't gotten me anywhere. Unless someone knows how to make @keyframes pierce across document scopes, we may have to roll back to <div class="progress">.

[ivanbatic]

This seems like a problem that will take infinite amount of time and hacking to get around, but is in fact completely unneeded. Not many people really care or benefit from this being implemented as an overridden native <progress> element. Just do it literally with any other tag.

[mdo]

Oof, okay, so it sounds like we need to revert back to the <div>-based solution to get all the features folks want here. The <progress> element also prohibits use of stacked progress bars, so that's another knock against it.

[gauravojha]

@mdo I am not sure if I should be putting this request here, or creating a separate issue, but there was a very handy feature in Bootstrap v3 progress bar to include text inside the progress bars. I do not see such support present now. Can it be expected that such a feature will be brought back? Captioning in v4 is fine, but takes up space.

[bardiharborow]

@gauravojha we should be able to bring that back fairly easily if we switch back to <div>-based bars.

[mdo]

Switched back to div.progress instead of <progress> in #21473, allowing animations to make their way back to the progress bars.