Using CSS clip-path only affects first object in w

Question

I am trying to use the CSS clip-path attribute to apply an SVG clip-path to some elements in a page. For example, HTML (note that clipPathUnits="objectBoundingBox" allows the circle to be expressed in fractions of the containing element size):

setTimeout(function(){
    $('.circle:first div').addClass('clipped');
    setTimeout(function(){
        $('.circle:nth-of-type(2) div').addClass('clipped');
    }, 2000);    
}, 2000);

.circle {
    width: 100px;
    height: 100px;
    overflow: hidden;
    margin-bottom: 10px;
}

.circle div {
    width: 100%;
    height: 100%;
    background: red;
    position: relative;
}

.clipped {
    -webkit-clip-path: url(#circle_clip);
    -moz-clip-path: url(#circle_clip);
    -o-clip-path: url(#circle_clip);
    clip-path: url(#circle_clip);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="circle">
    <div></div>
</div>

<div class="circle">
    <div></div>
</div>

<svg>
    <defs>
        <clippath id="circle_clip" clipPathUnits="objectBoundingBox">
            <circle cx=".5" cy=".5" r=".5" />
        </clippath>
    </defs>
</svg>

Using this code, the first element appears properly clipped into a circle, but the second element disappears in Chrome and Safari. On Firefox two elements appear, both properly clipped.

Here's another Fiddle that actually gets it to work by applying the clipping to each element, removing it from the first before applying to the second, then turning the first back on. Interesting, with timers to "animate" it everything works. If you simply add and remove the classes in a single operation it does not work, as if there was a race condition involved or it needs to finish rendering before the fix takes effect.

Am I doing something wrong or do Webkit browsers have a bug? Can someone get these Fiddles to work?