title: progress bar CSS problem with MediaElements.js
body: <p>I designed my own styles for <em>MediaElements.js</em> and everything works fine but the progress bar.</p>
  
  <p>I want to show the progress as a filled background but can't get it aligned to the left. Despite whatever styles I try to apply, the result shows the progress bar centered:</p>
  
  <p><a href="https://i.stack.imgur.com/Wrl6q.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Wrl6q.png" alt="enter image description here"></a></p>
  
  <p>This happens to <code>time-current</code> and also to <code>time-loaded</code> elements. They should be both aligned left after the play/pause button. Internally it is done by <code>transform: scaleX()</code> which seems to be related to the problem.</p>
  
  <p>Here is the <a href="https://jsfiddle.net/geraldo/gfm7b80t/" rel="nofollow noreferrer">jsfiddle</a>.</p>