Хромированная граница радиус ошибка при зависании

Question

У меня есть этот образ, и когда я нахожу его на дне его, он разворачивает div с некоторым контентом, но в нижней части div отображается странная серая рамка. Это происходит в Chrome и IE, Firefox отлично отображает его. Есть идеи, почему это происходит?

по наведению

<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: all .5s ease-in; 
    overflow: hidden; 
    cursor: default; 
} 

.img_wrap img { 
    transition: all .5s ease-in; 
    height: 100%; 
    cursor: pointer; 
} 

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

Answer 1

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

Я нашел обходной путь, который может быть подходящим для ваших нужд:

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

Заставив радиус границы и переполнение: скрытый на img_wrap DIV, а также к увеличению ширины/высоты контейнера DIV с помощью 1px эффект не виден:

.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; 
} 

Answer 2

Нижняя часть отображаемого изображения является черным. Ваш .title, перекрывающий его, по-прежнему позволяет видеть тонкую ленту. Вы можете изменить .img-wrap на следующее и устранить проблему: http://jsfiddle.net/9hpborps/.

.img_wrap { 
    height: 105%; 
}