css3 – Translate3d不会在Safari中移动嵌入式元素(仅限Windows)

2019年8月4日 226次阅读

我正在尝试使用
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 5.1.7 on Windows http://i60.tinypic.com/qna4ux.png

最佳答案 如果我是你,我会权衡寻找修复的成本与你影响的实际用户.我不认为有足够的用户来证明找到修复的理由,特别是因为问题的描述听起来像是一个Safari 5的bug.

对于transforms3d,Safari 5.7甚至不会在CanIUse上显示

而Safari 5 is only 0.2% of interet users in April和那个统计数据甚至没有显示Windows和其他操作系统之间的分离,因此可能更少.

我试图找到一个版本的Safari 5在Virtual Box中运行：Windows 8.1,但我甚至找不到它……

点赞