Lỗi nhấp nháy của iOS khi tràn css: cuộn được thay đổi thành tràn: ẩn

Question

Tôi đang tạo ứng dụng qua điện thoại và tôi muốn vô hiệu hóa cuộn của div trong nền khi tôi vuốt một menu lên từ dưới cùng của màn;

Bằng cách thay đổi tràn từ cuộn sang ẩn tại sao thao tác vuốt của trình đơn hoạt động nhưng nó làm cho màn hình nhấp nháy.

Bất cứ ai biết bất kỳ hack xung quanh để ngăn chặn một div nhấp nháy khi thích hợp tràn tràn được thay đổi?

Answer 1

Lỗi nhấp nháy có liên quan đến bộ nhớ GPU của điện thoại thông minh. Bộ nhớ bị hạn chế (VRAM), và nếu các phần tử quá phức tạp hoặc lớn hơn bộ nhớ, nó sẽ bị cạn kiệt. Trong android với rom CyanogenMod bạn có thể xem xử lý gpu với màu sắc trên màn hình. Từ màu xanh lá cây (sử dụng thấp) đến màu đỏ (sử dụng cao hơn của gpu). Demo image. Nhưng tôi không biết nếu tồn tại một công cụ tương tự cho IOS.

Điều này hiển thị trong mọi chuyển tiếp của ứng dụng hoặc khi sử dụng GPU.

Dù sao bạn có thể thử xóa/giảm sự phức tạp của các yếu tố của bạn, hoặc từ here:

Lựa chọn 1

<meta name="viewport" content="width=device-width, user-scalable=no" /> 

Lựa chọn 2this:

.ui-page { 
    -webkit-backface-visibility: hidden; 
} 

Op tion 3this:

.ui-mobile, .ui-mobile .ui-page, .ui-mobile [data-role="page"], 
.ui-mobile [data-role="dialog"], .ui-page, .ui-mobile .ui-page-active { 
     overflow: hidden; 
     -webkit-backface-visibility: hidden; 
} 

.ui-header { 
    position:fixed; 
    z-index:10; 
    top:0; 
    width:100%; 
    padding: 13px 0; 
    height: 15px; 
} 

.ui-content { 
    padding-top: 57px; 
    padding-bottom: 54px; 
    overflow: auto; 
    position: absolute; 
    top: 0; 
    right: 0; 
    bottom: 0; 
    left: 0; 
} 

.ui-footer { 
    position:fixed; 
    z-index:10; 
    bottom:0; 
    width:100%; 
} 

Hoặc chỉ cần loại bỏ các hiệu ứng chuyển tiếp (nếu vấn đề là trong quá trình chuyển đổi):

Lựa chọn 4

'-webkit-transition': 'none !important', 
'-moz-transition': 'none !important', 
'-o-transition': 'none !important', 
'-ms-transition': 'none !important', 
'transition': 'none !important' 

Answer 2

Thay đổi giá trị của tràn dường như làm cho -webkit-overflow-scrolling thay đổi giá trị từ chạm đến tự động, gây ra nhấp nháy.

Bạn có thể tìm thấy một số thông tin trong bài viết này: http://slytrunk.tumblr.com/post/33861403641/ios6-web-app-flickering-with. Vấn đề vẫn còn trong iOS7, nhưng chỉ, cho những gì tôi thấy, khi bạn chuyển từ liên lạc sang tự động (không còn tự động để chạm).

Không có khả năng hiển thị -webkit-backface: ẩn, -webkit-transform: translate3d (0,0,0), v.v. hoạt động trong trường hợp của tôi.

Như đã đề cập trong bài viết đã đề cập trước đây, một cách giải quyết có thể là gắn bó với -webkit-overflow-scrolling: tự động, với chi phí trải nghiệm người dùng tuyệt vời mà nó cung cấp.

khác sẽ là khóa di chuyển với javascript, nếu trang web của bạn có thể đủ khả năng đó:

function disableScroll() { 
    $(element).on('touchmove', function(event){ 
    event.preventDefault(); 
    }); 
}, 

function enableScroll() { 
    $(element).off('touchmove'); 
} 

Answer 3

Các giải pháp sử dụng -webkit-backface-visibility: hidden; mà làm việc, dường như gây ra vấn đề hiệu suất nếu bạn có nhiều thanh cuộn trên một trang.Safari trên iPad cũ đã đạt đến giới hạn CPU và làm rơi trình duyệt.

Tôi đã tìm thấy giải pháp hoạt động cho SPA của tôi (có thể có tới 100 thanh trượt trong danh sách) bằng cách thêm và xóa lớp học với kiểu vi phạm trên trang hiển thị & ẩn sự kiện.

.touchslide { 
    -webkit-overflow-scrolling:touch; 
} 

(Sử dụng jQuery mã phong cách giả) khi bạn rời khỏi trang, loại bỏ các lớp

selector.removeClass("touchslide"); 

Sau đó, trên tải trang:

selector.addClass("touchslide"); 
    selector.scrollLeft(0); 

Bạn cần phải kích hoạt sự kiện di chuyển trên iOS, do đó, nhắm mục tiêu đối tượng html và thêm vào scrollLeft vì cuộn đầu tiên sẽ không có hiệu ứng quán tính.