• 0

Safari 5 has broken CSS3 Transitions


Question

Hello,

I upgraded to Safari 5 this morning only to find some CSS3 transitions I've been playing with have broken. It still works in Chrome, Firefox etc.

The CSS is below:

#cat li > div {
	font-family: Helvetica, Arial, Sans-serif;
	text-align: center;
	font-weight: bold;
    width: 150px;
    min-height: 15px;
    position: absolute;
    display: block;
    margin-left: -20px;
    padding: 5px;
	visibility:hidden;
    opacity: 0;
    margin-top: -25px;
	background: #ffffff;
	font-size:0.8em;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    -moz-box-shadow: 0 0 8px gray;
    -webkit-box-shadow: 0 0 8px gray;
    box-shadow: 0 0 8px gray;
	-moz-transition: all 0.5s ease-in-out;
    -webkit-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;		
}


#cat li:hover > div {
     visibility:visible;
     opacity: 1;
     margin-top: 5px;
     cursor: pointer;
     -moz-transition: all 0.5s ease-in-out;
     -webkit-transition: all 0.5s ease-in-out;
     -o-transition: all 0.5s ease-in-out;
     transition: all 0.5s ease-in-out;
}

I presume it's been updated to the latest spec, but does anybody know what I need to change in the above?

Thanks!

Link to comment
Share on other sites

1 answer to this question

Recommended Posts

  • 0

This is starting to look like a problem with my Safari install. I've tried it on other computers and it works fine.

Strangely, it works when I open the Web Inspector but once I roll off it stops working. I haven't a clue what's causing it!

Link to comment
Share on other sites

This topic is now closed to further replies.
  • Recently Browsing   0 members

    • No registered users viewing this page.