CSS3 переходы застревают

Question

У меня довольно много переходов на нашем новом сайте. В частности, одна из них прекрасно работала и раньше, но поскольку при добавлении googlemaps определенный эффект перехода не срабатывает. Кроме того, он затем отключает все другие эффекты перехода на сайте, пока не будет запущена другая функция JavaScript.

Понятия не имею почему, но это факты. Проблемные швы должны быть ограничены SAFARI и не отображаются в Chrome. Вот эффект. Может кто-нибудь понять, почему это может сделать это.

#coursepack .rightcol .players a img {
    width:26px;
    height:26px;
    border:1px solid #FFF;
    margin-right:3px;
    margin-top:10px;
    position:relative;
    float:left;
    -webkit-transition:top, 500ms;
    -moz-transition:top, 500ms;
}
#coursepack .rightcol .players a:hover img  {
    border:1px solid #3CF;
    top:-12px;
}
#coursepack .rightcol .players a {
    background:none;
    position:relative;
    width:31px;
    height:36px;
    overflow:visible;
    float:left;
}
#coursepack .rightcol .players a:hover {
}
#coursepack .rightcol .players a span {
    font-family:"Helvetica Neue", "Myriad Pro", Arial;
    font-size:11px;
    background-color:#222;
    border-radius:6px;
    -moz-border-radius:6px;
    opacity:0;
    padding:6px;
    color:#FFF;
    position:absolute;
    width:90px;
    top:0px;
    left:-34px;
    text-align:center;
    -webkit-transition-property:all;
    -webkit-transition-duration:500ms;
    visibility:hidden;
    text-decoration:none;
}
#coursepack .rightcol .players a:hover span {
    opacity:0.8;
    top:40px;
    visibility:visible;
}

Marvelous

РЕДАКТИРОВАТЬ, я теперь установил точную проблему лежит внутри ссылки. Ссылки настроены так:

<a href=""><img src=""><span>Crazy Paul</span></a>

Если удалить интервал, он больше не приводит к сбою всех эффектов перехода, однако при этом удаляется всплывающая подсказка CSS, которая содержится в интервале.

Так почему бы промежуток сделать это и как мы можем предотвратить это.

Marvelous

Answer 1

Ну это исправлено.Это показывает, что все, что было нужно, это позиция: абсолютная характеристика, которую нужно добавить в span: hover, а не в span-линию CSS.Странно.

Кажется, что проба и ошибка снова победили.

#coursepack .rightcol .players a span {
    font-family:"Helvetica Neue", "Myriad Pro", Arial;
    font-size:11px;
    background-color:#222;
    border-radius:6px;
    -moz-border-radius:6px;
    opacity:0;
    padding:6px;
    color:#FFF;
    top:0px;
    left:-34px;
    text-align:center;
    visibility:hidden;
    text-decoration:none;
    -webkit-transition-property:all;
    -webkit-transition-duration:500ms;
}
#coursepack .rightcol .players a:hover span {
    opacity:0.8;
    top:40px;
    visibility:visible;
    position:absolute;
    width:90px;
}

Большое спасибо,