JSFiddle - React, Tailwind, and code Playground

HTML

I'm testing this on OS X 10.8.5
<ul>
    <li>Chrome works as expected.
    <li>Safari 6.0.5 does NOT work as expected.
        </ul>

<form id="testform">
<div class="preview" id="testdiv1">testa</div>
<input type="checkbox" onclick="test(1);">
<div class="preview" id="testdiv2">testb</div>
<input type="checkbox" onclick="test(2);">
</form>

CSS

.preview	{ background-color: #eee;width:100;height:100;color:red; }
.preview_l	{ background-color: #fff;width:100;height:100;color:red; background: url(/images/loading.gif) no-repeat center;}
.preview_s	{ border:3px solid blue;}

JavaScript

function runConfirm($div){
    if($div.hasClass('preview_s')){
        if (confirm('border not blue and checkmark not visible on some browsers until after choice is made')) {
            // Do confirmed thing here
        } else {
            // Abort
        }
    } else {
        runConfirm($div);
    }
}

function test(i) {
    var $div = $("#testdiv"+i);        

    $div.addClass('preview_s');
    runConfirm($div);
}