我目前正在使用html5和jQuery for iPad Safari開發一個Web應用程序。我遇到了一個問題，當我向下滾動它們時，大的滾動區域會導致屏幕外的元素在延遲后出現。我的意思是，如果我有一行圖像（或者甚至是帶有漸變的div）在屏幕外，當我向下（或向上）向下滾動時，預期的行為是元素在屏幕上顯示為我正在滾動它。然而，我所看到的是，直到我將手指從屏幕上抬起并且滾動條完成其所有動畫時才會出現該元素。這對我來說是一個非常明顯的問題，使整個事情看起來不穩定，盡管事實并非如此。我猜測iPad Safari正在嘗試做一些事情以節省內存。有什么辦法可以防止這種不穩定的發生。此外，如果有人能夠了解iPad Safari實際上正在嘗試做什么，我也將不勝感激。
3 回答
元芳怎么了
TA貢獻1798條經驗 獲得超7個贊
這是我的問題的完整答案。我最初將@Colin Williams的回答標記為正確的答案，因為它幫助我找到了完整的解決方案。社區成員@Slipp D. Thompson在我問了大約2。5年后編輯了我的問題，并告訴我，我正在濫用SO的問答形式。他還告訴我要另外發布這個答案。所以這是解決我問題的完整答案：
@Colin Williams，謝謝！您的答案和您鏈接的文章讓我領導嘗試使用CSS。
所以，我之前使用的是translate3d。它產生了不必要的結果 基本上，它會切斷屏幕外的RENDER元素，直到我與它們交互。所以，基本上，在橫向方向，我的網站的一半是在屏幕外沒有顯示。這是一個iPad網絡應用程序，因為我正在修復。
將translate3d應用于相對定位的元素解決了這些元素的問題，但其他元素在屏幕外停止渲染。除非我重新加載頁面，否則我無法與之交互的元素（圖稿）將永遠不會再渲染。
完整的解決方案：
*:not(html) {
-webkit-transform: translate3d(0, 0, 0);
}
現在，雖然這可能不是最“有效”的解決方案，但它是唯一有效的解決方案。使用時，Mobile Safari不會渲染屏幕外的元素，有時也會呈現不規則的元素-webkit-overflow-scrolling: touch。除非translate3d應用于因滾動而可能在屏幕外的所有其他元素，否則這些元素將在滾動后被切斷。
所以，再次感謝，并希望這有助于其他一些失去的靈魂。這肯定幫了我很大的時間！
一只名叫tom的貓
TA貢獻1906條經驗 獲得超3個贊
針對除html之外的所有元素： *:not(html) 在我的案例中引起了其他元素的問題。它修改了堆疊上下文，導致一些z-index中斷。
我們應該更好地嘗試定位正確的元素并僅適用-webkit-transform: translate3d(0,0,0)于它。
編輯：有時候translate3D(0,0,0)不起作用，我們可以使用以下方法，瞄準正確的元素：
@keyframes redraw{
0% {opacity: 1;}
100% {opacity: .99;}
}
// ios redraw fix
animation: redraw 1s linear infinite;
- 3 回答
- 0 關注
- 1144 瀏覽
相關問題推薦
添加回答
舉報
0/150
提交
取消