HTML5 Progress Element on Safari won't change value unless the Web Inspector is open
<p>I've been using a progress element to display a battery value which is assigned over Javascript whenever a button is clicked. This value updates reliably on every browser besides Safari. </p>

<p>For some reason this progress element will only update it's value while the Web Inspector is open, until that point it will wrongly display a bar about 10% full. </p>

<p>Below is the switch case used to assign the value:</p>

<pre><code>    switch(x) { 
    case (x = "critical"):
        document.getElementById('batBar').value = "10";
        break;
    case (x = "low"):
        document.getElementById('batBar').value = "25";
        break;
    case (x = "half"):
        document.getElementById('batBar').value = "50";
        break;
    case (x = "high"):
        document.getElementById('batBar').value = "75";
        break;
    case (x = "full"):
        document.getElementById('batBar').value = "100";
        break;
    case (x = "charging"):
        document.getElementById('batBar').value = "100";
        break;
    case (x = "charged"):
        document.getElementById('batBar').value = "100";
        break;
    }
</code></pre>

<p>The element itself:</p>

<pre><code>&lt;div class="settingsline"&gt;
    &lt;label&gt;Battery 
        &lt;progress id="batBar" max="100" value="60"&gt;&lt;/progress&gt; 
    &lt;/label&gt;
&lt;/div&gt;
</code></pre>

<p>I was wondering if there was a reason that this might be happening as researching the issue is turning up nothing.</p>

<p>UPDATE: I spotted and fixed the problem by changing the syntax of the switch-case; I'm not sure how I didn't notice this.
My question now is how it even worked in the first place and why opening the inspector fixed this.</p>