防止Safari切換

我有一個絕對位於另一個之上的元素。事情是背景元素有一個小的JS在Y軸上旋轉取決於鼠標的移動。不幸的是，我在Safari中看到一個問題，它沒有出現在Firefox或Chrome中。防止Safari切換

http://jsfiddle.net/cehzd/2/

背景要素通過削減前景一上來，我想知道是否有任何防止這種情況，還是有它的行爲如Firefox。

編輯：更新例如包括背景圖片（梯度），這是更精確到什麼我在網站上看到。此錯誤不會在Windows和Mac顯示（不像前面的例子中，SANS背景圖片，這是僅適用於Windows）

來源

2012-02-10 Brian

看起來是一樣的，我在Safari 5.1.3適用於Chrome 17（同時支持Mac） – 2012-02-10 18:28:34

嗯。我在Windows上運行Safari 5.1.2，我希望它不是操作系統特定的。 – Brian 2012-02-10 18:34:35

好消息是，幾乎沒有人對Windows使用Safari瀏覽器:-) – 2012-02-10 18:57:55

肯定有一個錯誤，但我不得不改變你的jsfiddle不少。 （你從你的實際代碼中剝離得太多了嗎？）。我可以通過使用-webkit-transform-style: preserve-3d;而不使用它（或使其flat）修復我的代碼中的「剪切」來重新創建您的問題。

看看這個的jsfiddle與我的版本的bug（註釋掉）和修復。請注意，應用-webkit-transform-style: preserve-3d;確實會在Safari（Mac）中創建您的問題，而不是在Chrome中：http://jsfiddle.net/rgthree/cehzd/

希望有幫助。

來源

2012-02-10 19:24:12 rgthree

我也簡化了很多，但我的jsfiddle仍顯示的bug在我的身邊，（雖然在我的情況下，它只能在Windows，Mac的顯示出來看起來不錯）我看你的例子工作得很好，但我認爲我沒有提到的另一個問題是背景旋轉元素具有背景圖像。在這種情況下：http://jsfiddle.net/cehzd/2/我添加了一個漸變（認爲它的行爲與bg圖像相同），並且您可以看到它會平坦或不平坦。：/ – Brian 2012-02-10 20:02:58

對不起，我應該提到：你不再應該將'rotateY'應用到'section' _（該部分保留了孩子旋轉的視角）_，而是裏面的'h1'。因此，把你的背景放在'h1'上。像這樣：http://jsfiddle.net/rgthree/cehzd/3/ – rgthree 2012-02-10 20:34:00

非常感謝。我仍然在我的真實網站上有錯誤，但是複製了HTML，因爲前景元素需要是透視容器的SIBLING，而THEN包含旋轉的子元素。唷！永遠不會想到這一個！：d – Brian 2012-02-10 22:08:29

我將簡單地增加一個transform: translateZ(100px);到容器在前臺其中100px是藍色容器除以2作爲其transform-origin的寬度是默認50% 50%。它不會爲transform: scale(...);同樣的效果，只要外包裝沒有preserve-3d的transform-style。

來源

2017-12-11 18:38:15

防止Safari切換

回答

相關問題