Translate3d doesn't move embedded element in Safari (Windows only)

Question

I'm trying to move an embedded element with the CSS3's transform: translate3d() method. It works perfectly in every browser, except for Safari, which doesn't seem to move the video/audio itself but manages to move the embedded element.

Here's the fiddle.

I've moved a container div to the right with translate3d(). I've also set a border for the div and the embedded element/object.

HTML

<div class="audio">
    <object height="50" width="100"
     data="http://www.w3schools.com/html/horse.mp3"></object>
</div>

CSS

.audio{
    -webkit-transform: translate3d(300px,0,0);
    -ms-transform: translate3d(300px,0,0);
    -o-transform: translate3d(300px,0,0);
    transform: translate3d(300px,0,0);
}

Is this an unfixable bug or does anyone have a fix?

EDIT:

Safari 5.1.7 on Windows 8.1

Answer 1

If I were you, I'd be weighing the cost of finding a fix versus the actual users you'd affect. I don't think there are enough users to justify trying to find a fix, especially because the description of the problem sounds like it may be a Safari 5 bug.

Safari 5.7 doesn't even show up on CanIUse for transforms3d

And Safari 5 is only 0.2% of interet users in April and that stat doesn't even show the split between Windows and other operating systems, so it could be even less.

I tried to find a version of Safari 5 to run in Virtual Box: Windows 8.1, but I couldn't even find it...