【问题标题】:Translate3d doesn't move embedded element in Safari (Windows only)Translate3d 不会在 Safari 中移动嵌入元素(仅限 Windows)
【发布时间】:2014-02-04 03:35:56
【问题描述】:

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

这是fiddle

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

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);
}

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

编辑:

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 上测试)...如果需要支持,请提供降级支持...跨度>

标签: css safari transform embed translate3d


【解决方案1】:

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

Safari 5.7 甚至没有出现在 CanIUsetransforms3d

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

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

【讨论】:

  • 是的,已经有一段时间了。从那以后我继续前进并没有修复它。我只会将您的答案标记为正确。
猜你喜欢
  • 1970-01-01
  • 2011-01-22
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2011-05-23
相关资源
最近更新 更多