Translate3d 不会在 Safari 中移动嵌入元素（仅限 Windows）

Posted 2023-03-13

【中文标题】Translate3d 不会在 Safari 中移动嵌入元素（仅限 Windows）

【英文标题】：Translate3d doesn't move embedded element in Safari (Windows only)

【发布时间】：2014-02-04 03:35:56

【问题描述】：

我正在尝试使用 CSS3 的 transform: translate3d() 方法移动嵌入元素。它在所有浏览器中都能完美运行，除了 Safari，它似乎不会移动视频/音频本身，但会设法移动嵌入的元素。

这是fiddle。

我使用 translate3d() 将容器 div 移到了右侧。我还为 div 和嵌入的元素/对象设置了边框。

HTML

<div class="audio">
    <object  
     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);

这是一个无法修复的错误还是有人修复了？

编辑：

Windows 8.1 上的 Safari 5.1.7

【问题讨论】：

您运行的是哪个版本的 Safari？据我所知，您的小提琴在 Safari 7.0.1 和 Chrome 32.0（在 Mac OS X 10.9.1 上）中的功能完全相同

我刚刚在 BrowserStack 上测试过它（不知道为什么我之前没有想到），但这似乎是 Windows 唯一的问题。 Mac 上的 Safari 似乎还不错。我已经添加了问题的屏幕截图。

Safari for windows 已不再更新，因此无关紧要（如在 firefox 3 或 chrome 20 上测试）...如果需要支持，请提供降级支持...跨度>

【参考方案1】：

如果我是你，我会权衡寻找修复的成本与你会影响的实际用户。我认为没有足够的用户来证明试图找到修复程序是合理的，特别是因为问题的描述听起来可能是 Safari 5 的错误。

Safari 5.7 甚至没有出现在 CanIUse 上 transforms3d

而Safari 5 is only 0.2% of interet users in April 甚至没有显示 Windows 和其他操作系统之间的差异，因此它可能会更少。

我试图找到在 Virtual Box 中运行的 Safari 5 版本：Windows 8.1，但我什至找不到它......

【讨论】：

是的，已经有一段时间了。从那以后我继续前进并没有修复它。我只会将您的答案标记为正确。