Cuộn iPad Safari khiến các thành phần HTML biến mất và xuất hiện lại với độ trễ

Tôi hiện đang phát triển một ứng dụng web bằng html5 và jQuery cho iPad Safari. Tôi đang gặp vấn đề trong đó các khu vực cuộn lớn khiến các thành phần ngoài màn hình xuất hiện sau khi trì hoãn khi tôi cuộn xuống chúng.

Ý tôi là, nếu tôi có một hàng hình ảnh (hoặc thậm chí là div có độ dốc) ở ngoài màn hình, khi tôi cuộn xuống (hoặc lên) đến nó, hành vi dự kiến ​​sẽ cho phần tử xuất hiện trên màn hình như Tôi đang cuộn đến nó.

Tuy nhiên, những gì tôi đang thấy là phần tử không xuất hiện cho đến khi tôi nhấc ngón tay ra khỏi màn hình và thanh cuộn hoàn thành tất cả các hình động của nó.

Điều này đang gây ra một vấn đề siêu đáng chú ý đối với tôi, làm cho toàn bộ sự việc trở nên khó hiểu, mặc dù không phải vậy. Tôi đoán iPad Safari đang cố gắng làm gì đó để tiết kiệm bộ nhớ. Có cách nào để tôi có thể ngăn chặn sự hỗn loạn này xảy ra không. Ngoài ra, tôi cũng sẽ đánh giá cao nếu bất kỳ ai cũng có thể làm sáng tỏ những gì iPad Safari thực sự đang cố gắng thực hiện.

Bạn cần lừa trình duyệt để sử dụng tăng tốc phần cứng hiệu quả hơn. Bạn có thể làm điều này với một biến đổi 3d trống:

-webkit-transform: translate3d(0,0,0)

Đặc biệt, bạn sẽ cần điều này trên các phần tử con có position:relative;khai báo (hoặc, chỉ cần đi ra ngoài và thực hiện nó cho tất cả các phần tử con).

Không phải là một sửa chữa được đảm bảo, nhưng khá thành công hầu hết thời gian.

Mẹo về mũ: https://web.archive.org/web/20131005175118/http://cantina.co/2012/03/06/ios-5-native-scrolling-grins-and-gothcas/

Đây là câu trả lời đầy đủ cho câu hỏi của tôi. Ban đầu tôi đã đánh dấu câu trả lời của @Colin Williams là câu trả lời đúng, vì nó giúp tôi đi đến giải pháp hoàn chỉnh. Một thành viên cộng đồng, @Slipp D. Thompson đã chỉnh sửa câu hỏi của tôi, sau khoảng 2,5 năm tôi đã hỏi nó và nói với tôi rằng tôi đang lạm dụng định dạng Hỏi & Đáp của SO. Ông cũng nói với tôi để riêng bài này là câu trả lời. Vì vậy, đây là câu trả lời đầy đủ giải quyết vấn đề của tôi:

@Colin Williams, cảm ơn bạn! Câu trả lời của bạn và bài viết bạn liên kết để đưa cho tôi một hướng dẫn để thử một cái gì đó với CSS.

Vì vậy, tôi đã sử dụng translate3d trước đây. Nó tạo ra kết quả không mong muốn. Về cơ bản, nó sẽ loại bỏ và KHÔNG RENDER các yếu tố ngoài màn hình, cho đến khi tôi tương tác với chúng. Vì vậy, về cơ bản, theo hướng ngang, một nửa trang web của tôi ngoài màn hình không được hiển thị. Đây là một ứng dụng web dành cho iPad, do đó tôi đã khắc phục được.

Áp dụng translate3d cho các phần tử được định vị tương đối đã giải quyết vấn đề cho các phần tử đó, nhưng các phần tử khác đã dừng kết xuất, một khi ngoài màn hình. Các yếu tố mà tôi không thể tương tác với (tác phẩm nghệ thuật) sẽ không bao giờ hiển thị lại, trừ khi tôi tải lại trang.

Giải pháp hoàn chỉnh:

*:not(html) {
    -webkit-transform: translate3d(0, 0, 0);
}

Bây giờ, mặc dù đây có thể không phải là giải pháp "hiệu quả" nhất, nhưng nó là giải pháp duy nhất hoạt động. Mobile Safari không hiển thị các thành phần ngoài màn hình hoặc đôi khi hiển thị thất thường khi sử dụng -webkit-overflow-scrolling: touch. Trừ khi một transl3d được áp dụng cho tất cả các yếu tố khác có thể bị tắt màn hình do cuộn đó, các yếu tố đó sẽ bị cắt nhỏ sau khi cuộn.

Vì vậy, cảm ơn một lần nữa, và hy vọng điều này sẽ giúp một số linh hồn bị mất khác. Điều này chắc chắn đã giúp tôi thời gian lớn!

Nhắm mục tiêu tất cả các yếu tố ngoại trừ html: *:not(html) gây ra sự cố trên các yếu tố khác trong trường hợp của tôi. Nó sửa đổi bối cảnh xếp chồng, khiến một số chỉ số z bị phá vỡ.

Chúng ta nên cố gắng nhắm mục tiêu đúng yếu tố và chỉ áp dụng -webkit-transform: translate3d(0,0,0)cho nó.

Chỉnh sửa: đôi khi translate3D(0,0,0)không hoạt động, chúng ta có thể sử dụng phương pháp sau, nhắm mục tiêu đúng phần tử:

@keyframes redraw{
    0% {opacity: 1;}
    100% {opacity: .99;}
}

// ios redraw fix
animation: redraw 1s linear infinite;

Khi transl3d không hoạt động, hãy thử thêm phối cảnh. Nó luôn làm việc cho tôi

transform: translate3d(0, 0, 0);
-webkit-transform: translate3d(0, 0, 0);
perspective: 1000;
-webkit-perspective: 1000;

http://blog.teamtreehouse.com/increas-your-sites-performance-with-hardware-accelerated-css

Thêm -webkit-transform: translate3d(0,0,0)vào một yếu tố tĩnh không làm việc cho tôi.

Tôi áp dụng tài sản này một cách năng động. Ví dụ, khi một trang được cuộn, tôi đặt -webkit-transform: translate3d(0,0,0)trên một phần tử. Sau một thời gian trì hoãn ngắn, tôi đặt lại thuộc tính này, nghĩa là -webkit-transform: none Cách tiếp cận này có vẻ hiệu quả.

Cảm ơn bạn, @Colin Williams đã chỉ cho tôi đi đúng hướng.

Tôi gặp vấn đề tương tự với iscroll 4.2.5 trên ios7. Toàn bộ phần tử cuộn chỉ biến mất. Tôi đã cố gắng thêm translate3d(0,0,0)như được đề xuất ở đây, nó đã giải quyết được vấn đề, nhưng nó đã vô hiệu hóa hiệu ứng "snap" của iscroll. Giải pháp đi kèm với việc cung cấp "position:relative; z-index:1000;display:block"các thuộc tính css cho toàn bộ vùng chứa phần tử cuộn và không cần phải dịch transl3d cho các phần tử con.

Tại thời điểm translate3dcó thể không hoạt động, trong những trường hợp perspectivecó thể được sử dụng

transform: translate3d(0, 0, 0);
-webkit-transform: translate3d(0, 0, 0);
perspective: 1000;
-webkit-perspective: 1000;

Tôi khá chắc chắn rằng tôi vừa giải quyết điều này với:

overflow-y: auto;

(Có lẽ overflow: auto;sẽ chỉ hoạt động tùy thuộc vào nhu cầu của bạn.)

Có những trường hợp áp dụng xoay vòng và / hoặc chỉ số Z được sử dụng.

Xoay vòng : Một tuyên bố hiện có -webkit-transformđể xoay một phần tử có thể không đủ để giải quyết vấn đề ngoại hình (như -webkit-transform: rotate(-45deg)). Trong trường hợp này, bạn có thể sử dụng -webkit-transform: translateZ(0px) rotateZ(-45deg)như một mẹo ( nhớ Z xoay ).

Chỉ số Z : Cùng với vòng quay, bạn có thể xác định một thuộc tính dương z-index, như thế nào z-index: 42. Các bước trên được mô tả trong "Xoay vòng" trong trường hợp của tôi đủ để giải quyết vấn đề, ngay cả khi trống translateZ(0px). Tôi nghi ngờ mặc dù chỉ số Z trong trường hợp này có thể đã gây ra sự biến mất và xuất hiện lại ở nơi đầu tiên. Trong mọi trường hợp z-index: 42tài sản cần phải được giữ - -webkit-transform: translateZ(42px)chỉ là không đủ.

Đây là một vấn đề rất phổ biến mà các nhà phát triển phải đối mặt và điều đó chủ yếu là do Safari'sthuộc tính không tái tạo các yếu tố được xác định là position : fixed.

Vì vậy, hoặc thay đổi thuộc tính vị trí hoặc một số hack cần phải được áp dụng như được đề cập trong các câu trả lời khác.

Liên kết1

Liên kết2

Trong trường hợp của tôi (một ứng dụng Phonegap trên iOS), việc áp dụng transl3d cho các phần tử con tương đối không giải quyết được vấn đề. Phần tử có thể cuộn của tôi không có chiều cao được đặt vì nó được định vị tuyệt đối và tôi đang xác định vị trí trên cùng và dưới cùng. Điều cố định nó cho tôi là thêm chiều cao tối thiểu (100px).

Tôi gặp vấn đề tương tự khi sử dụng phiên bản cũ hơn của Fancybox. Nâng cấp lên v3 sẽ giải quyết vấn đề của bạn HOẶC bạn chỉ cần thêm:

html, body {
    -webkit-overflow-scrolling : touch !important;
    overflow: auto !important;
    height: 100% !important;
}

Tôi đã đối mặt với vấn đề này trong một dự án Framework7 & Cordova. Tôi đã thử tất cả các giải pháp trên. Họ đã không giải quyết vấn đề của tôi.

Trong trường hợp của tôi, tôi đã sử dụng hơn 10 hình ảnh động css trên cùng một trang với vòng xoay vô hạn (biến đổi). Tôi đã phải loại bỏ các hình ảnh động. Bây giờ là ổn với việc thiếu một số tính năng hình ảnh.

Nếu các giải pháp trên không giúp ích cho bạn, bạn có thể bắt đầu loại bỏ một số hình ảnh động.

các -webkit-transform: translate3d(0, 0, 0);thủ thuật không làm việc cho tôi. Trong trường hợp của tôi, tôi đã đặt cha mẹ thành:

// parent
height: 100vh;

Thay đổi điều đó thành:

height: auto;
min-height: 100vh;

Giải quyết vấn đề trong trường hợp người khác đang đối mặt với tình huống tương tự.

Trong trường hợp của tôi, CSS không khắc phục được sự cố. Tôi nhận thấy vấn đề trong khi sử dụng jQuery kết xuất lại một nút.

$("#myButton").html("text")

Thử cái này

$("#myButton").html("<span>text</span>")