Grow your CSS skills. Land your dream job.

CSS Transition bug in Safari 5.0.3

  • # February 22, 2011 at 1:18 pm

    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)

    hope someone can shed some light on this issue
    thnx
    -neco

    # February 22, 2011 at 5:08 pm

    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.

    Anyone know why flash would be disrupting the CSS Transition?

    # February 22, 2011 at 6:00 pm

    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.

    # February 23, 2011 at 4:36 pm

    thanks man, this kinda worked. Previously i had some flash content running below my transition buttons. I separated the flash from the buttons and they work better -

    HOWEVER, they only work correct initially. After i try to hover over them multiple times they eventually start to ‘lag’ again.

    iframe didn’t really work nor did changing the !DOCTYPE, but having the transitions occur on elements above flash content seemed to be the most troublesome issue.

    It’s half resolved at the moment but I’d still like to find out more about why flash is causing the disruption to my transitions…

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".