Merge pull request #7621 from jeremydenoun/patch-1

Fix flickering on progress bar width update

diff --cc docs/assets/css/bootstrap.css
index e1260c7d596fd5e6e0cac75cda8badad179caeef,145e08a5b648af0ee782f70523c20b2a5815309a..df1432dcb022e8fd0fbf6d20311b7e9cdbfd23e6
--- 1/docs/assets/css/bootstrap.css
--- 2/docs/assets/css/bootstrap.css
+++ b/docs/assets/css/bootstrap.css
@@@ -4895,10 -5813,19 +4895,13 @@@ a.list-group-item.active > .badge
       -moz-transition: width 0.6s ease;
         -o-transition: width 0.6s ease;
            transition: width 0.6s ease;
+   -webkit-backface-visibility: hidden;
+      -moz-backface-visibility: hidden;
+           backface-visibility: hidden;
  }
  
 -.progress .bar + .bar {
 -  -webkit-box-shadow: inset 1px 0 0 rgba(0, 0, 0, 0.15), inset 0 -1px 0 rgba(0, 0, 0, 0.15);
 -     -moz-box-shadow: inset 1px 0 0 rgba(0, 0, 0, 0.15), inset 0 -1px 0 rgba(0, 0, 0, 0.15);
 -          box-shadow: inset 1px 0 0 rgba(0, 0, 0, 0.15), inset 0 -1px 0 rgba(0, 0, 0, 0.15);
 -}
 -
 -.progress-striped .bar {
 -  background-color: #149bdf;
 +.progress-striped .progress-bar {
 +  background-color: #428bca;
    background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(0.25, rgba(255, 255, 255, 0.15)), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, rgba(255, 255, 255, 0.15)), color-stop(0.75, rgba(255, 255, 255, 0.15)), color-stop(0.75, transparent), to(transparent));
    background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
    background-image: -moz-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);

diff --cc less/progress-bars.less
index 9df0251e3716ba3c4cb842ab0db2acd3b63eed0a,300def0ecb72ab1135e9ad20fd435cd2f5350b61..e5e6b65a538c04983da91949c7e92df90991d3ac
--- 1/less/progress-bars.less
--- 2/less/progress-bars.less
+++ b/less/progress-bars.less
@@@ -52,22 -51,28 +52,23 @@@
  }
  
  // Bar of progress
 -.progress .bar {
 +.progress-bar {
 +  float: left;
    width: 0%;
    height: 100%;
 -  color: @white;
 -  float: left;
 -  font-size: 12px;
 +  font-size: @font-size-small;
 +  color: #fff;
    text-align: center;
    text-shadow: 0 -1px 0 rgba(0,0,0,.25);
 -  #gradient > .vertical(#149bdf, #0480be);
 +  background-color: @progress-bar-bg;
    .box-shadow(inset 0 -1px 0 rgba(0,0,0,.15));
 -  .box-sizing(border-box);
    .transition(width .6s ease);
+   .backface-visibility(hidden);
  }
 -.progress .bar + .bar {
 -  .box-shadow(~"inset 1px 0 0 rgba(0,0,0,.15), inset 0 -1px 0 rgba(0,0,0,.15)");
 -}
  
  // Striped bars
 -.progress-striped .bar {
 -  #gradient > .striped(#149bdf);
 +.progress-striped .progress-bar {
 +  #gradient > .striped(@progress-bar-bg);
    .background-size(40px 40px);
  }