Examinus Posted June 8, 2010 Share Posted June 8, 2010 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 More sharing options...
0 Examinus Posted June 8, 2010 Author Share Posted June 8, 2010 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 More sharing options...
Question
Examinus
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