Html ：在Safari中使用css内容中断悬停动画

我使用视口单位buggyfill来覆盖

vw

和

vh

度量。我必须在css中使用

内容

来创建一个好的后备方案，所有这些都可以正常工作，但是，出于我不理解的原因，Safari不允许我设置

动画：悬停

如果代码中有css

内容

，那么问题就出在Safari 8/Mac和iOS8上测试过了

知道我做错了什么吗

div{
边框：1px纯黑；
填充：20px；
位置：固定；
宽度：100vw；
最小高度：50vh；
-webkit过渡：所有0.3版本都可以轻松过渡；
过渡：所有0.3秒放松；
内容：“不是问题”；
溢出：隐藏；
}
div:悬停{
-webkit转换：translate3d（50vw，0，0）；
变换：translate3d（50vw，0，0）；
内容：“不工作”；
}

---

只能在伪元素中使用

内容
属性

发件人：

content CSS属性与：：before和：：after伪元素一起使用，以生成元素中的内容

这可能是Safari的突破点（在Safari for Windows中测试并确认）。尝试移动
内容：“不工作”进入
div:hover:after
改为：


div{
边框：1px纯黑；
填充：20px；
位置：固定；
宽度：100vw；
最小高度：50vh；
-webkit过渡：所有0.3版本都可以轻松过渡；
过渡：所有0.3秒放松；
溢出：隐藏；
}
div:悬停{
-webkit转换：translate3d（50vw，0,0）；
变换：translate3d（50vw，0,0）；
}
div:悬停：之后{
内容：“不工作”；
}
据我所知，不需要content“”属性，因为它只与：before&:after等一起使用

我将：悬停改为左边距：50%，达到了同样的效果

我不确定是否在safari中使用translate3d，因为我个人从未使用过它

如果你不知道这个网站有哪些浏览器可以接受哪些内容，请访问它

这就是我所做的

div {
border: 1px solid black;
padding: 20px;
position: fixed;
width: 100vw;
min-height: 50vh;
-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-ms-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
content: "not-a-problem";
overflow: hidden;

}

div:hover {
margin-left: 50%;
}

是的，我知道，但是当我需要buggyfill插件使用的内容，并且它可以在所有其他平台上工作时，如果有任何方法不导致Safari上的错误，我想我会尝试以不同的方式解决它。谢谢你们！