Chrome border-radius игнорируется, когда дочерний элемент использует относительное позиционирование

Question

Я работаю над проектом, в котором используется круговой контур, наложенный на изображения, для создания эффекта зеркала, при котором вы можете перетаскивать изображение внутри кругового элемента.

Разметка для приложения выглядит следующим образом:

<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 автоматически заполняет навигационный объект числами, которые затухают в текущих изображениях и затухают в зависимости от того, по какому нажатию щелкнули.

Вот и код Sass для объекта

@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

Когда я накладываю перетаскиваемый эффект на изображения, им присваивается стиль относительной позиции и по какой-то причине останавливается возможность округления элемента div, содержащего изображения. Это ошибка в Chrome или я что-то здесь не так делаю?

Answer 1

Может это тебе поможет Правильный способ написания префиксов вендоров - поместить имя свойства не вендора в последнюю позицию, например, так:

-webkit-property: value;
   -moz-property: value;
    -ms-property: value;
     -o-property: value;
        property: value;