css - Chrome border radius bug on hover -

css - Chrome border radius bug on hover -

i have image , when hover on bottom of it, diplays div content weird gray border shown @ bottom of div. happens in chrome , ie, firefox displays perfectly. ideas why happening?

on hover

<div class="video_wrap" id="1" yt_id="-nsches-8e0" video_name="onajr "> <div class="img_wrap"> <img src="http://img.youtube.com/vi/-nsches-8e0/hqdefault.jpg"></img> </div> <div class="title">o'najr</div> </div>

.video_wrap { width: 240px; height: 240px; display: inline-block; border-radius: 120px; overflow: hidden; background: #fff; margin: 5px 10px; position: relative; } .img_wrap { width: 240px; height: 240px; } .title:hover { opacity: 1; } .title { position: relative; top: -50px; left: 0px; background: #fff; height: 50px; opacity: 0; color: rgba(248, 0, 140, 0.99); font-size: 12px; text-align: center; line-height: 50px; transition: .5s ease-in; overflow: hidden; cursor: default; } .img_wrap img { transition: .5s ease-in; height: 100%; cursor: pointer; }

fiddle: http://jsfiddle.net/a12y1ork/2/

i don't know problem chromium perspective seems chrome using color of pixel @ outside border determine border-radius blending color. tried many things prepare not find workable solution.

i found workaround may suitable needs:

http://jsfiddle.net/a12y1ork/8/

by forcing border radius , overflow:hidden on img_wrap div , increasing width/height of container div 1px effect not visible:

.video_wrap { width: 241px; height: 241px; display: inline-block; overflow: hidden; background: transparent; margin: 5px 10px; position: relative; border-radius: 120px; } .img_wrap { width: 240px; height: 240px; border-radius: 370px; overflow: hidden; }

css css3 internet-explorer google-chrome