html - Firefox not displaying CSS updated via JavaScript -

i'm implementing sort of progress bar using html/css using 1 div inside another:

<div class="composite-player-duration">   <div class="composite-player-duration-amount"></div> </div> 

the inner div should grow inside outer div horizontally. here less style divs , javascript function implements progress:

style.less

.composite-player-duration {   -webkit-transform: translatey(40px);   -webkit-transition: 0.3s ease;   background-color: rgba(0, 0, 0, 0.2);   bottom: 0;   left: 0;   position: absolute;   right: 0;   top: 0;   transform: translatey(40px);   transition: 0.3s ease; } .composite-player-duration-amount {   -webkit-transition: 0.1s;   background-color: orange;   float: left;   height: @height0;   opacity: 0.5;   transition: 0.1s;   width: 0%; } 

player.js

function startcount() {   playpausebutton.classname = 'composite-playpause fa fa-pause';   timer = setinterval(function() {     played = video.currenttime;     (var = currentsegment - 1; >= 0; i--) {       played += segments[i].duration;     };     amount = (played/duration) * 100;     $(durationamount).css('width', amount + '%');   }, 100) } 

in google chrome, works expected. however, in firefox, can't see bar grow. if set width value other 0% (let's 50%), can see bar stuck in other value.

the weird thing if log durationamount element, can see width value being updated:

<div class="composite-player-duration-amount" style="width: 4.17961%;"> 

why width update not being displayed in browser?

var played = 0;  var duration = 300;  var durationamount = document.getelementsbyclassname('composite-player-duration-amount')[0];      setinterval(function() {    var amount = (played/duration) * 100;    $(durationamount).css('width', amount + '%');    played += 1;  }, 100)

.composite-player-duration {    -webkit-transform: translatey(40px);    -webkit-transition: 0.3s ease;    background-color: rgba(0, 0, 0, 0.2);    bottom: 0;    left: 0;    position: absolute;    right: 0;    top: 0;    transform: translatey(40px);    transition: 0.3s ease;    height: 50px;  }    .composite-player-duration-amount {    -webkit-transition: 0.1s;    background-color: orange;    float: left;    height: 50px;    opacity: 0.5;    transition: 0.1s;    width: 0%;  }    **update:**  snippet:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>  <div class="composite-player-duration">        <div class="composite-player-duration-amount"></div>      </div>