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
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...