CSS3 transitions getting stuck

I have quite a lot of transitions going on on our new site. There is one in particular that worked perfectly before but since adding googlemaps a certain transition effect does not trigger. Furthermore it then disables all other transition effects on the site until another javascript function is fired.

I have no idea why, but those are the facts. The problem seams to be confined to SAFARI and does not appear in Chrome. Here is the effect. Can anyone see why it might do this.

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

Marvellous

EDIT, I have now established the exact problem lies in the inside the link. The links are set up like this:

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

If one removes the span it no longer crashes all transition effects, however that does take out the pure CSS tooltip as that is contained within the span.

So why would the span do this and how can we prevent it.

Marvellous

Well it is fixed. It seams that all that was needed was for the position:absolute characteristic of the needed to be added to the span:hover and not the span line of the CSS. Strange.

Seams that trial and error has won once again.

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

Many Thanks,