Question

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?

Answer 1

May this can help you
The right way to write vendor prefixes is to put nonvendor property name on the last position, like this way:

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