移动Safari浏览器奇怪的半透明盒子

好了，所以我有一对夫妇的头与他们联系。就像这样：移动Safari浏览器奇怪的半透明盒子

<h1><a href="">text</a></h1>

然后，我使用CSS3，像这样旋转他们：

-webkit-transform: rotate(-90deg) translate(-63px, -117.5px); 
-moz-transform: rotate(-90deg) translate(-63px, -117.5px);

我也用翻译道具。将它们放在我想要的位置（而不是绝对位置），以实现向后兼容。

现在它看起来完美的Firefox或Chrome，但是当我看着它在移动Safari浏览器有这些奇怪的半透明盒子从容器的一路关闭屏幕右边去。

任何想法断手？如果必须，我可以发布例子，但在我做之前，有人知道它可能是什么吗？谢谢！

来源

2011-10-07 Timothy Miller

在移动Safari浏览器中的一个错误，无法正常渲染转型？你是否设置了一个空白页面，只有一个旋转，看看它是否仍然存在？ – Sparky

是！正如我发现的那样，这是文字强调是越野车。不知道为什么，但那是问题所在。当我删除文字下划线时，问题解决了。 –

所以它看起来像文本旋转，但下划线是在原来的位置留在一个盒子里的鬼魂？绝对是Mobile Webkit渲染问题。 – Sparky

我解决它。为了将来的参考，这个问题是Mobile Safari中的一个错误。我有一个'文字装饰：下划线;'在我旋转的链接上，由于某种原因，Safari将它拉伸并使其部分透明。不知道它为什么这样做，但删除下划线解决了问题。感谢你的想法，每个人！

来源

2011-10-07 23:26:05

如果你自己的答案有效，你可以自由接受它，因为它解决了你自己的问题。 – mc10

@ mc10，是的，OP应该记得接受他自己的答案。但是，他不允许这样做至少48小时。 – Sparky

问题是-webkit-transform和-moz-transform是浏览器特定的，并且不能用于其他浏览器（即Opera，IE等）。参考：CSS3 transform from MDN。用于桌面的Safari应该与-webkit-transform一起工作; iOS Safari的状态不明。

下面的代码应该工作在更多的浏览器（即它应该是更便携）：

transform: rotate(-90deg) translate(-63px, -117.5px); 
-webkit-transform: rotate(-90deg) translate(-63px, -117.5px); 
-moz-transform: rotate(-90deg) translate(-63px, -117.5px); 
-o-transform: rotate(-90deg) translate(-63px, -117.5px); 
-ms-transform: rotate(-90deg) translate(-63px, -117.5px);

来源

2011-10-07 04:34:31 mc10

你的回答似乎不能解决OP的问题。如果CSS规则适用于Mobile Safari，那么它应该可以正常工作。如果CSS规则不适用于Mobile Safari，则应该忽略它。那么，他描述的怪异轮廓是什么？ – Sparky

这取决于OP在页面上与元素相关的其他CSS样式。 – mc10

你明确指出，_“问题是......”。但是，如果它是由他的网页上的其他内容引起的，那么这不是您的答案所确定的问题。换句话说，我们正在谈论移动Safari，并且您说专门针对桌面浏览器的CSS规则是个问题。怎么可能？ Mobile Safari是否使用Webkit规则？如果是这样，那么它看起来像一个错误。 – Sparky

移动Safari浏览器奇怪的半透明盒子

回答

相关问题