移動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瀏覽器奇怪的半透明盒子

回答

相關問題