If an element is transformed using a transition on hover, when the element is un-hovered and the transform undone then absolutely positioned descendant elements are put back in the wrong place. It's a little hard to describe, so: 1. Go to http://meyerweb.com/eric/css/tests/safari/transform-jump.html 2. Hover over the blue box (the 'body' element). 3. Observe the absolutely positioned element move. *This is as expected.* 4. Un-hover the 'body' element. 5. Observe the absolutely positioned element moved to a place other than where it started. *This is NOT as expected.* The moving box should go back to where it started. It appears to move the correct distance horizontally, just in the wrong direction. That is, if it shifts horizontally -50px during the transform, it does so again when the transform ends instead of shifting +50px horizontally. The linked test case works as expected in Firefox.
Addendum: Natalie@Avallo pointed out that after doing the steps given above, if you resize the browser window the absolutely positioned element snaps back to its proper place. (https://twitter.com/natalieAvallo/status/2080731752824833) I think this happens even if the windows is only vertically and not horizontally resized, though it's hard to be sure I'm doing a directly-vertical resize with the mouse.
I don't see any transitions in the testcase.
I do, when moving the mouse pointer over and then away from the blue-ish box, which is the 'body' element (as described in the testcase). Safari Version 5.0 (5533.16). So, apparently, did Natalie, though I don't know which version she was using.
Sorry, transition to me == "CSS 3 Transition". You're using it in the general sense. I can reproduce the bug, and it's transform-related.
Oh, yes. Good point. Sorry for any confusion.
Safari, Chrome, and Firefox all agree on rendering for this test case. I don't believe there is any remaining compatibility issue.