Chrome border-radius is ignored when child element uses relative positioning

I am working on a project that utilizes a circular div laying over images to create a sort of looking glass effect, where you can drag an image around within the circular div.

The markup for the app is as follows:

<div id="LookingGlass" class="looking-glass" style="margin:0 auto;">
     <div class="looking-glass-images">
         <img src="/wp-content/uploads/2011/11/CCDS_Ext_008a-copy.jpg" width="1250" height="980" />
         <img src="wp-content/uploads/2011/11/CCDS_Ext_011.jpg" width="967" height="1250" />
         <img src="wp-content/uploads/2011/11/CCDS_Ext_012.jpg" width="1250" height="962" />
         <img src="wp-content/uploads/2011/11/CCDS_Int_005.jpg" width="912" height="1250" />
         <img src="wp-content/uploads/2011/11/CCDS_Int_008.jpg" width="1250" height="833" />
     </div>
     <ul class="looking-glass-nav"></ul>
 </div>
 

jQuery autopopulates the nav object with numbers that fade out the current images and fade in whichever is clicked.

Here is the Sass code for the object as well

@mixin border-radius($size)
     border-radius: $size
     -webkit-border-radius: $size
     -moz-border-radius: $size
 
 .looking-glass
     display: block
     height: 100%
 
     .looking-glass-nav
         li
             display: inline
             padding: 5px
 
     .looking-glass-images
         overflow: hidden
         display: block
         height: 500px
         width: 500px
         @include border-radius(50%)
 
         img
             -webkit-user-select: none
             -moz-user-select: none
             user-select: none
         img.active
             display: block
         img.inactive
             display: none
 

When I impose the draggable effect on the images they are given a relative position style and for some reason that stops the div containing the images from being roundable. Is this a bug in Chrome or is there something I am doing wrong here?

---