3

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

3
  • 1
    Can you link to a live page so that we can see and inspect this with all involved components?
    – edgerunner
    Sep 8, 2011 at 16:11
  • Its offline at the moment. Ill see if I can get a fiddle up. I have added to the question as I've specifically found the problem but don't see how to fix it
    – Walrus
    Sep 8, 2011 at 16:13
  • @edgerunner, fixed by moving the position:absolute to the span:hover in the CSS. Very strange but it worked.
    – Walrus
    Sep 8, 2011 at 16:19

1 Answer 1

1

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,

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.