使用CSS轉換的元素不會出現在iPad/iPhone上，直到使用Safari Web檢查器進行檢查時

我正在使用大量CSS動畫（通常爲TranslateY）的網頁，這些CSS動畫通過JQuery在各種滾動位置觸發。它適用於Webkit，FF，IE等。不幸的是，在iPhone和iPad上，一些（但不是全部）元素都沒有出現。我意識到移動和桌面上「滾動」的區別，並且已經確認添加到動畫中的類實際上正在被添加。使用CSS轉換的元素不會出現在iPad/iPhone上，直到使用Safari Web檢查器進行檢查時

我將iPad插入桌面，並使用Safari的Mobile Web Inspector來徘徊......真奇怪的是，我已經確認動畫正在觸發，divs在四處移動，它們不是可見...直到我在檢查器中爲div添加一行樣式。只要我開始輸入任何內容，即使只是一個空行，該元素就會出現！這讓我完全陷入困境。我試過添加一個z-index但不知道還有什麼要做。

我使用Safari 6.1.1，這是本文的最新版本。另外，關閉溢出：隱藏;對父容器有幫助，但不幸的是，我需要溢出：隱藏;爲這個應用程序。

任何幫助表示讚賞，感謝 -

這是我如何添加類的動畫：

function getTopHeight() { 
    return (document.body.scrollTop) ? 
      document.body.scrollTop : 
      document.documentElement.scrollTop; 
} 

$(window).scroll(function() {  

     // Manage animations on scroll on the 'our story' page. 
     if (getTopHeight() >= 442){ 

      $('.tree-1').addClass('popup-animation'); 
     } ...

而且這些都是一些CSS規則我，圍繞着該動畫：

.tree-1{ 
    transition: all 0.5s; 
    -webkit-transition: all 0.5s; /* Safari */ 
    -moz-transition: all 0.5s; /* FF */ 
} 
.popup-animation{ 
    -ms-transform: translateY(-330px); 
    -webkit-transform: translateY(-330px); 
    -moz-transform: translateY(-330px); 
}

來源

2014-02-07 ChubbRck

如果您添加了一些代碼，我們可能會幫助您。通過它的外觀，我會首先嚐試將translate3d（0，Y，0）替換TranslateY並查看結果。此外，您可以嘗試添加內聯代碼而不是css來查看錯誤 – scooterlord

您可以在JSFiddle上發佈示例或與您遇到的問題相關的任何代碼嗎？ – jonsuh

增加了一些代碼，謝謝 - – ChubbRck

按照這個有點相關的SO question的一些解決方案，我能夠解決我的問題，加入：

-webkit-transform-style: preserve-3d;

...正在翻譯的元素。

來源

2014-02-08 22:42:55 ChubbRck

使用CSS轉換的元素不會出現在iPad/iPhone上，直到使用Safari Web檢查器進行檢查時

回答

相關問題