Obraz Css Przesunięcie wewnątrz ramki Border-Radius

Question

Tworzę obraz, który może być zawarty w promieniu obramowania o wartości 100%.
Po najechaniu myszą obraz zostanie przeskalowany. Teraz przychodzi problem. Po najechaniu myszą zobaczysz obraz na 1 sekundę poza promieniem brzegu.

Wygląda na to, że działa w przeglądarce Firefox. Ale nie w chrome i Safari.

żywo Demo:
http://jewelbeast.com/something/imghover/rounded.html

HTML:

<div class="rounded-smallborder"> 
     <section class="img-scale img-opacity" style="width: 250px; height: 250px;"> 
      <img src="http://placehold.it/250x250" /> 
      <div class="text"> 
       <span> 
        <h1>This is a title</h1> 
        <ul> 
         <li>List number 1</li> 
         <li>List number 2</li> 
         <li>List number 3</li> 
        </ul> 
       </span> 
      </div> 
     </section> 
    </div> 

CSS:

div.rounded-smallborder{ 
    margin-top: 22px; 
    margin-bottom: 22px; 
    height: 362px; 
    width: 228px; 
    float: left; 
    display: block; 
    margin-left: 10px; 
} 

div.rounded-smallborder section{ 
    position: relative; 
    width: 217px; 
    height: 217px; 
    -webkit-border-radius: 100%; 
    -moz-border-radius: 100%; 
    -ms-border-radius: 100%; 
    -o-border-radius: 100%; 
    border-radius: 100%; 
    border: 5px solid white; 

    -webkit-box-shadow: 0px 0px 0px 1px rgba(201, 201, 201, 1); 
    -moz-box-shadow: 0px 0px 0px 1px rgba(201, 201, 201, 1); 
    -ms-box-shadow: 0px 0px 0px 1px rgba(201, 201, 201, 1); 
    -o-box-shadow: 0px 0px 0px 1px rgba(201, 201, 201, 1); 
    box-shadow: 0px 0px 0px 1px rgba(201, 201, 201, 1); 

    float:left; 
    text-align: center; 

    -webkit-transition: all .3s; 
    -moz-transition: all .3s; 
    -ms-transition: all .3s; 
    -o-transition: all .3s; 
    transition: all .3s; 

    overflow: hidden; 
    background: #dfdfdf; 
} 

div.rounded-smallborder section img{ 
    position: absolute; 

    -webkit-transition: all .3s; 
    -moz-transition: all .3s; 
    -ms-transition: all .3s; 
    -o-transition: all .3s; 
    transition: all .3s; 

    left: 0%; 
} 


div.rounded-smallborder section.img-slideleft:hover img{ 
    margin-left: -35px; 
} 

div.rounded-smallborder section.img-zoomin:hover img{ 
    width: 550px; 
} 

div.rounded-smallborder section.img-slideup:hover img{ 
    margin-top: -35px; 
} 

div.rounded-smallborder section.img-opacity:hover img{ 
    opacity: 0.2; 
} 

div.rounded-smallborder section.img-diagonal:hover img{ 
    margin-top: -35px; 
    margin-left: -35px; 
} 

div.rounded-smallborder section.img-rotation:hover img{ 
    -webkit-transform:rotate(360deg); 
    -o-transform:rotate(360deg); 
    -ms-transform:rotate(360deg); 
    -moz-transform:rotate(360deg); 
    transform:rotate(360deg); 
} 


div.rounded-smallborder section.img-scale:hover img{ 
    -webkit-transform:scale(1.45); 
    -o-transform:scale(1.45); 
    -moz-transform:scale(1.45); 
    -ms-transform:scale(1.45); 
    transform:scale(1.45); 
} 

/* Text effecten */ 
div.rounded-smallborder section.txt-slideinleft .text{ 
    -webkit-transition: all .3s; 
    -moz-transition: all .3s; 
    -ms-transition: all .3s; 
    -o-transition: all .3s; 
    transition: all .3s; 

    margin-left:-250px; 
} 

div.rounded-smallborder section.txt-slideinleft:hover .text{ 
    margin-left: 0px; 
} 

div.rounded-smallborder section.txt-slideinleftTitle .text span h1{ 
    -webkit-transition: all .3s; 
    -moz-transition: all .3s; 
    -ms-transition: all .3s; 
    -o-transition: all .3s; 
    transition: all .3s; 

    margin-left:-250px; 
} 

div.rounded-smallborder section.txt-slideinleftTitle:hover .text span h1{ 
    margin-left: 0px; 
} 



div.rounded-smallborder section.txt-slideinright .text{ 
    -webkit-transition: all .3s; 
    -moz-transition: all .3s; 
    -ms-transition: all .3s; 
    -o-transition: all .3s; 
    transition: all .3s; 

    margin-left:250px; 
} 

div.rounded-smallborder section.txt-slideinright:hover .text{ 
    margin-left: 0px; 
} 

div.rounded-smallborder section.txt-slideinrightTitle .text span h1{ 
    -webkit-transition: all .3s; 
    -moz-transition: all .3s; 
    -ms-transition: all .3s; 
    -o-transition: all .3s; 
    transition: all .3s; 

    margin-left:250px; 
} 

div.rounded-smallborder section.txt-slideinrightTitle:hover .text span h1{ 
    margin-left: 0px; 
} 

div.rounded-smallborder section.txt-slideinleftRightAll .text span h1{ 
    -webkit-transition: all .3s; 
    -moz-transition: all .3s; 
    -ms-transition: all .3s; 
    -o-transition: all .3s; 
    transition: all .3s; 

    margin-left:-250px; 
} 

div.rounded-smallborder section.txt-slideinleftRightAll:hover .text span h1{ 
    margin-left: 0px; 
} 

div.rounded-smallborder section.txt-slideinleftRightAll .text span p{ 
    -webkit-transition: all .3s; 
    -moz-transition: all .3s; 
    -ms-transition: all .3s; 
    -o-transition: all .3s; 
    transition: all .3s; 

    margin-left:250px; 
} 

div.rounded-smallborder section.txt-slideinleftRightAll:hover .text span p{ 
    margin-left: 0px; 
} 

div.rounded-smallborder section.txt-slideinleftRightAll .text span a{ 
    -webkit-transition: all .3s; 
    -moz-transition: all .3s; 
    -ms-transition: all .3s; 
    -o-transition: all .3s; 
    transition: all .3s; 

} 

div.rounded-smallborder section.txt-slideinleftRightAll:hover .text span a{ 
} 


div.rounded-smallborder section.txt-opacityAll .text span h1{ 
    -webkit-transition: opacity .3s; 
    -moz-transition: opacity .3s; 
    -ms-transition: opacity .3s; 
    -o-transition: opacity .3s; 
    transition: opacity .3s; 

    transition-delay: 0s; 
    -webkit-transition-delay: 0s; /* Safari */ 
    -moz-transition-delay: 0s; /* Safari */ 
    -ms-transition-delay: 0s; /* Safari */ 
    -o-transition-delay: 0s; /* Safari */ 

    opacity: 0; 
} 

div.rounded-smallborder section.txt-opacityAll:hover .text span h1{ 
    opacity: 1; 
} 

div.rounded-smallborder section.txt-opacityAll .text span p{ 
    -webkit-transition: opacity .3s; 
    -moz-transition: opacity .3s; 
    -ms-transition: opacity .3s; 
    -o-transition: opacity .3s; 
    transition: opacity .3s; 

    transition-delay: .5s; 
    -webkit-transition-delay: .5s; /* Safari */ 
    -moz-transition-delay: .5s; /* Safari */ 
    -ms-transition-delay: .5s; /* Safari */ 
    -o-transition-delay: .5s; /* Safari */ 

    opacity: 0; 
} 

div.rounded-smallborder section.txt-opacityAll:hover .text span p{ 
    opacity: 1; 
} 

div.rounded-smallborder section.txt-opacityAll .text span a{ 
    -webkit-transition: opacity .3s; 
    -moz-transition: opacity .3s; 
    -ms-transition: opacity .3s; 
    -o-transition: opacity .3s; 
    transition: opacity .3s; 

    transition-delay: 1s; 
    -webkit-transition-delay: 1s; /* Safari */ 
    -moz-transition-delay: 1s; /* Safari */ 
    -ms-transition-delay: 1s; /* Safari */ 
    -o-transition-delay: 1s; /* Safari */ 

    opacity: 0; 
} 

div.rounded-smallborder section.txt-opacityAll:hover .text span a{ 
    opacity: 1; 
} 


div.rounded-smallborder section.txt-slideintop .text{ 
    -webkit-transition: all .3s; 
    -moz-transition: all .3s; 
    -ms-transition: all .3s; 
    -o-transition: all .3s; 
    transition: all .3s; 

    margin-top:-450px; 
    margin-left: 0px; 
} 

div.rounded-smallborder section.txt-slideintop:hover .text{ 
    margin-top: 0px; 
} 

div.rounded-smallborder section.txt-slideinbottom .text{ 
    -webkit-transition: all .3s; 
    -moz-transition: all .3s; 
    -ms-transition: all .3s; 
    -o-transition: all .3s; 
    transition: all .3s; 

    margin-top:450px; 
    margin-left: 0px; 
} 

div.rounded-smallborder section.txt-slideinbottom:hover .text{ 
    margin-top: 0px; 
} 

div.rounded-smallborder section.txt-longopacity .text{ 
    -webkit-transition: opacity 1s; 
    -moz-transition: opacity 1s; 
    -ms-transition: opacity 1s; 
    -o-transition: opacity 1s; 
    transition: opacity 1s; 

    margin-left: -250px; 

    opacity: 0; 
} 

div.rounded-smallborder section.txt-longopacity:hover .text{ 
    margin-left: 0px; 

    opacity: 1; 
} 

div.rounded-smallborder section.txt-slideinleftRotation .text{ 
    -webkit-transition: all .3s; 
    -moz-transition: all .3s; 
    -ms-transition: all .3s; 
    -o-transition: all .3s; 
    transition: all .3s; 

    margin-left: -250px; 

} 

div.rounded-smallborder section.txt-slideinleftRotation:hover .text{ 
    margin-left: 0px; 

    -webkit-transform:rotate(360deg); 
    -o-transform:rotate(360deg); 
    -ms-transform:rotate(360deg); 
    -moz-transform:rotate(360deg); 
    transform:rotate(360deg); 
} 

div.rounded-smallborder section.txt-slideinrightRotation .text{ 
    -webkit-transition: all .3s; 
    -moz-transition: all .3s; 
    -ms-transition: all .3s; 
    -o-transition: all .3s; 
    transition: all .3s; 

    margin-left:250px; 

} 

div.rounded-smallborder section.txt-slideinrightRotation:hover .text{ 
    margin-left: 0px; 

    -webkit-transform:rotate(360deg); 
    -o-transform:rotate(360deg); 
    -ms-transform:rotate(360deg); 
    -moz-transform:rotate(360deg); 
    transform:rotate(360deg); 
} 



div.rounded-smallborder section.txt-slideintopRotation .text{ 
    -webkit-transition: all .3s; 
    -moz-transition: all .3s; 
    -ms-transition: all .3s; 
    -o-transition: all .3s; 
    transition: all .3s; 

    margin-top: -450px; 
    margin-left: 0px; 

} 

div.rounded-smallborder section.txt-slideintopRotation:hover .text{ 
    margin-top: 0px; 

    -webkit-transform:rotate(360deg); 
    -o-transform:rotate(360deg); 
    -ms-transform:rotate(360deg); 
    -moz-transform:rotate(360deg); 
    transform:rotate(360deg); 
} 


div.rounded-smallborder section.txt-slideinbottomRotation .text{ 
    -webkit-transition: all .3s; 
    -moz-transition: all .3s; 
    -ms-transition: all .3s; 
    -o-transition: all .3s; 
    transition: all .3s; 

    margin-top: 450px; 
    margin-left: 0px; 

} 

div.rounded-smallborder section.txt-slideinbottomRotation:hover .text{ 
    margin-top: 0px; 

    -webkit-transform:rotate(360deg); 
    -o-transform:rotate(360deg); 
    -ms-transform:rotate(360deg); 
    -moz-transform:rotate(360deg); 
    transform:rotate(360deg); 
} 

/* End of text effecten */ 


div.rounded-smallborder section .text{ 
    position: absolute; 
    top: 0; 
    left: 0; 
    height: 100%; 
    width:100%; 
    display:table; 
    margin-left: -250px; 
} 

div.rounded-smallborder section:hover .text{ 
    margin-left: 0px; 
} 

div.rounded-smallborder section span{ 
    width: 200px; 
    display: table-cell; 
    vertical-align: middle; 
    padding: 20px; 
    color: black; 

    opacity: 0; 

    text-shadow: 1px 1px 0px rgba(255,255,255,0.3); 
} 

div.rounded-smallborder section:hover span{ 
    opacity: 1; 
} 

div.rounded-smallborder section:hover img{ 
    opacity: 0.5; 
} 

div.rounded-smallborder section span h1{ 
    width: 100%; 
    text-align: center; 

    font-size: 18px; 
    font-family: Verdana, sans-serif; 
    font-weight: bold; 
    line-height: 25px; 
    margin-bottom: 3px; 
} 

div.rounded-smallborder section span p{ 
    width: 100%; 
    text-align: center; 

    font-size: 10px; 
    font-family: Verdana, sans-serif; 
    font-weight: bold; 
    margin-bottom: 10px; 
} 

div.rounded-smallborder section span ul{ 
    list-style-position:inside; 
} 

div.rounded-smallborder section span ul li{ 
    width: 100%; 
    text-align: center; 

    font-size: 10px; 
    font-family: Verdana, sans-serif; 
    font-weight: bold; 
    line-height: 15px; 
} 

div.rounded-smallborder section span a.button{ 
    display: table; 
    margin: 0px auto; 

    text-align: center; 
    color: white; 
    text-shadow: none !important; 
    text-decoration: none; 

    font-size: 10px; 
    font-family: Verdana, sans-serif; 
    font-weight: bold; 

    padding: 9px 10px 11px 10px; 
    border: 1px solid #000000; 

    background: #494949; /* Old browsers */ 
    background: -moz-linear-gradient(top, #494949 1%, #3a3a3a 94%); /* FF3.6+ */ 
    background: -webkit-gradient(linear, left top, left bottom, color-stop(1%,#494949), color-stop(94%,#3a3a3a)); /* Chrome,Safari4+ */ 
    background: -webkit-linear-gradient(top, #494949 1%,#3a3a3a 94%); /* Chrome10+,Safari5.1+ */ 
    background: -o-linear-gradient(top, #494949 1%,#3a3a3a 94%); /* Opera 11.10+ */ 
    background: -ms-linear-gradient(top, #494949 1%,#3a3a3a 94%); /* IE10+ */ 
    background: linear-gradient(to bottom, #494949 1%,#3a3a3a 94%); /* W3C */ 
} 

div.rounded-smallborder section span a.entire{ 
    width: 100%; 
    position: absolute; 
    top: 0px; 
    left: 0px; 
    height: 100%; 
} 

/* END */ 

Mam nadzieję, że ktoś zna problem.

Answer 1

Niestety jest to błąd na chromowanej wersji 27.0.1453.116 m Który jest opisać go tutaj bug 62363

Występuje podczas korzystania overflow:hidden w mieszance z transform: scale(1.45)

obejście , który działa dobrze w aspekcie projektu, wystarczy usunąć overflow:hidden na div.rounded-smallborder section. (tylko opcja obejścia problemu). Możesz obejrzeć podgląd tutaj. fiddle example

Mam nadzieję, że to pomaga.

Answer 2

wydaje się być błędem silnika. Dodanie promienia obramowania również do znacznika obrazu powinno rozwiązać problem.

div.rounded-smallborder section img{ 
    position: absolute; 
    border-radius: 100%;  /*added line*/ 
    -webkit-transition: all .3s; 
    -moz-transition: all .3s; 
    -ms-transition: all .3s; 
    -o-transition: all .3s; 
    transition: all .3s; 
    left: 0%; 
} 

http://jsfiddle.net/5RA4m/

Answer 3

edytowany kod zobaczyć wyniki here

to chrom BUG ze skali i przelewem.

do pojemnika, które mają (overflow: hidden) dodatek (w przypadku Jego div.rounded-smallborder section) dają

position:relative; 
z-index:1;