Forums

CSS Transition bug in Safari 5.0.3

im using css transtions on a site and they are behaving oddly on Safari 5.0.3. Anyone else having this kind of issue?

The initial and hover states work fine but after you mouse out, some of the original properties are lost or the regular and hover states are mixed together…idk whats goin on. but only in Safari 5.0.3….??

FYI i am using the transition on a submit button. with borders, border radius, and BG gradients on both normal and hover states..(im on a macOSX, did not test in PC)

One thing to note is that i have a flash object present on my page. The strange thing is that when i set the “display” of the flash container to “none” the CSS Transition behaves perfectly. I don’t get it.

Hmm… without looking at the page it’s hard to say but I’ll try a guess.

Transitions and flash do not like each together. Flash doesn’t like rounded corners either. Transitions and rounded corners both use opacity to achieve their effects. If you have one on top of the other it could cause problems (like a rounded submit button on a flash background or something).

If you use an iframe for your flash, or you switch to html5 if possible, it should fix the problem.

Tips

Categories

We have a pretty good* newsletter.

Email Address

CSS-Tricks* is created, written by, and maintained by Chris Coyier and a team of swell people. It is built on WordPress, hosted by Media Temple, and the assets are served by MaxCDN. The fonts are Source Sans Pro and Source Code Pro. It is made possible through sponsorships from products and services we like.