Hình ảnh động CSS trên iPhone WebKit gây nhấp nháy

83

Đây là trang web dành cho iPhone: http://www.thevisionairegroup.com/projects/accessorizer/site/

Sau khi bạn nhấp vào "chơi ngay bây giờ", bạn sẽ đến được một trò chơi. Các khẩu súng sẽ cuộn vào. Bạn có thể cuộn túi và phụ kiện lên xuống. Bạn có thể thấy rằng khi bạn buông tay, chúng sẽ bắt đầu vào đúng vị trí. Giống như cái chớp mắt đó xảy ra, có một sự nhấp nháy xảy ra. Các hoạt ảnh webkit duy nhất mà tôi đang sử dụng là:

'-webkit-transition': 'none'

'-webkit-transition': 'all 0.2s ease-out'

'-webkit-transform': 'translate(XXpx, XXpx)'

Tôi chọn chuyển đổi đầu tiên hoặc chuyển đổi thứ hai dựa trên việc tôi có muốn nó hoạt hình hay không và chuyển đổi là cách duy nhất để tôi di chuyển mọi thứ xung quanh.

Tuy nhiên, vấn đề lớn nhất là khi bạn nhấp vào "Đối sánh các mục", sau đó nhấp vào "Chơi lại". Bạn sẽ thấy khi các khẩu súng hoạt hình, toàn bộ nền của phụ kiện / ví chuyển sang màu trắng. Ai đó có thể vui lòng cho tôi một số hiểu biết sâu sắc về lý do tại sao điều này xảy ra không ??

iphone  css  animation  webkit  flicker 
— Jake Chapa
nguồn

Câu trả lời:

126

Tôi đã thêm -webkit-backface-visiblityvà điều đó hầu như đã giúp ích, nhưng tôi vẫn gặp hiện tượng nhấp nháy ban đầu sau khi tải lại trang. Khi tôi thêm vào -webkit-perspective: 1000, không có bất kỳ nhấp nháy nào.

-webkit-perspective: 1000;
-webkit-backface-visibility: hidden;
— Wes Baker
nguồn
21
Điều kỳ diệu đằng sau con số 1000 là gì? Có bất kỳ giá trị nào khác (> 0) có thể hoạt động không?
— cYrus
Chú ý: điều này làm cho các hình ảnh động không đáp ứng với các sự kiện chuột trên cửa sổ chrome V19: trong thực tế bổ sung này, không có nhấp nháy, nhưng các hình ảnh động không luôn luôn bắt đầu (trên di chuột chuột hoặc bất cứ điều gì)
— skyline26
1
LƯU Ý: thêm khả năng hiển thị mặt sau sẽ thay đổi hiển thị màu của bạn. Dưới đây là một ví dụ với tầm nhìn backface và tắt: bit.ly/13ldbvY
— Tamik Soziev
3
Tôi đã gặp sự cố này với văn bản nhấp nháy khi cố gắng chuyển đổi các phần tử liên kết. Việc thay đổi khả năng hiển thị mặt sau đã thay đổi tính năng khử răng cưa, làm cho phông chữ thực sự mỏng. Đã sửa lỗi bằng cách sử dụng -webkit-font-smoothing: subpixel-antialiased;
— Dan
1
@cYrus Tôi đoán chúng ta sẽ không bao giờ biết
— Denny
39

Hãy thử điều này và hy vọng nó sẽ giúp:

#game {
  -webkit-backface-visibility: hidden;
}
— donohoe
nguồn
2
Điều này hoạt động tốt trong mặc định của Safari nhưng không thành công ở chế độ độc lập. Bạn có bất cứ ý tưởng?
— cYrus
18 
body {-webkit-transform:translate3d(0,0,0);}
— Brian D'Astous
nguồn
Điều này đã làm điều đó cho tôi .. tuy nhiên tôi phải áp dụng nó trên một #wrapperphần tử vì việc áp dụng trên phần thân sẽ làm hỏng bố cục.
— adamJLev
Nếu ai muốn xem backface "-webkit-backface -osystem: hidden;" không hoạt động, nhưng cái này là hoàn hảo. Cảm ơn!
— Nachtgold
hoàn hảo. -webkit-backface-visibility: hidden;làm cho bất kỳ chuyển đổi tỷ lệ nào bị mờ. body {-webkit-transform:translate3d(0,0,0);}đã làm một điều trị.
— Liam
Tôi đang cố gắng nhưng nó không hiệu quả với tôi. Đây là đoạn mã: codeply.com/go/g7Zp98paz5
— Fran_gg7
1
Điều này đã làm việc cho tôi. Trong trường hợp của tôi, scale(1)gây ra nhấp nháy. thanks a lot
— jansesun
12

Câu trả lời thực tế cho trường hợp của tôi là đây. Ai đó đã gần gũi với: -webkit-backface-vision: hidden; Nhưng câu trả lời thực sự là -webkit-backface -ibility: hidden; cần được thêm vào div mẹ .

— Johan De Silva
nguồn
Tôi thực sự cần thêm -webkit-backface-visibility: hidden;vào div mẹ, div động VÀ các con của div động. Một khi tôi đã làm điều đó, nó hoạt động hoàn hảo.
— mattstuehler
2
Tôi nghĩ rằng điều đó cũng đã sửa lỗi nhấp nháy của tôi bằng cách thêm nó vào trang gốc. Nó thực sự làm gì?
— chovy
Việc thêm nó vào phần tử gốc sẽ hoàn tác vị trí "cố định" trên các phần tử con :(
— James
11

Tôi cũng gặp sự cố với quá trình chuyển đổi CSS "chập chờn". Hoạt ảnh được đề cập là một menu trượt vào từ màn hình và ngay khi hoạt ảnh kết thúc, toàn bộ menu sẽ nhấp nháy / nhấp nháy.

Hóa ra, điều này là do một tính năng thực tế của iOS, "đánh dấu khi chạm" , vì một lý do nào đó được kích hoạt sau khi hoạt ảnh CSS kết thúc (tức là sau khi chạm thực tế) và đánh dấu toàn bộ menu thay vì chỉ phần tử đã được khai thác. Tôi đã "khắc phục" sự cố bằng cách tắt hoàn toàn tính năng đánh dấu nhấn, như được mô tả ở đây :

-webkit-tap-highlight-color: rgba(0,0,0,0);
— fresskoma
nguồn
5

Câu trả lời của Michael -webkit-backface-visibility: hidden; đã phát huy tác dụng khi chúng tôi giải quyết vấn đề này. Chúng tôi đã có translateZ(0px)trên của chúng tôi <body>thẻ để ngăn chặn một iOS 3.1.3 và trước đó IFRAMElỗi ranh giới và nó gây ra anims để nhấp nháy. Thêm -webkit-backface-visibility: hidden;vào mỗi phần tử, chúng tôi đã sửa lỗi hoạt hình! Tiết kiệm cuộc sống.

— Rob Barreca
nguồn
3 
div { -webkit-tap-highlight-color: rgba(255, 255, 255, 0); }

tôi nhận thấy khi tôi có trạng thái di chuột trên div, trang sẽ nhấp nháy, ngay cả khi tôi không có bất kỳ css hoặc js nào được gắn vào nó. có thể điều này sẽ giúp người khác.

— Jesse
nguồn
đối với tôi rằng một trong những đã làm lừa. những cái khác chỉ có liên quan khi có quá trình chuyển đổi.
— Nadav
3

Nếu bất kỳ ai thấy rằng khả năng hiển thị mặt sau không hoạt động, bạn có thể xem xét các thuộc tính đã có trên phần tử hoạt hình của mình. Đối với chúng tôi, chúng tôi nhận thấy rằng overflow-y: scrolltrên một absolutehoặcfixed phần tử phần tử được định vị đang gây ra hiện tượng nhấp nháy nghiêm trọng trên iOS.

Đơn giản chỉ cần loại bỏ overflow-y: scrollcố định nó.

— KendallB
nguồn
Xóa overflow-y: scrollđã giúp trường hợp của tôi. Cảm ơn bạn rất nhiều!
— YemSalat
Nó cũng có thể là trường hợp của tôi. nhưng tôi không thể loại bỏ tràn-y nore là positon tuyệt đối cho phần tử này. bất kỳ ý tưởng?
— Kobi Cohen
1

Mặc dù tôi đã -webkit-transform-style: preserve-3d;và-webkit-backface-visibility: hidden hiện tượng nhấp nháy vẫn xảy ra.

Trong trường hợp của tôi, nguyên nhân là do z-index. Tăng nó trên phần tử hoạt động đã giúp ích.

— Morpheus
nguồn
0

Đây là một giải pháp mới. Tôi đang thiết lập hình nền bằng jQuery và không có thủ thuật dựng hình 3D nào hiệu quả. Vì vậy, tôi đã thử sử dụng các lớp để xác định các thuộc tính thay thế. Voilà! Mịn như bơ.

Điều này gây ra nhấp nháy:

$('#banner').css('backgroundImage', 'url("slide_1.jpg")';

Thay vào đó hãy làm:

$('#banner').attr('class', '.slide-1');

với các lớp được định nghĩa:

#banner { -webkit-transition: background-image .25s; }
.slide-1 { background-image: url("slide_1.jpg"); }
.slide-2 { background-image: url("slide_2.jpg"); }
— mattwad
nguồn
0

Tôi đã dành rất nhiều thời gian để tìm ra vấn đề này cho Ember Animated Outlets, Phonegap và iOS lập .

Mặc dù đơn giản, tôi phải thêm nền cho từng phần tử mẹ cấp cao nhất có trong các hoạt ảnh css. Nói cách khác, hãy đảm bảo rằng không có điểm nào trong các quan điểm của bạn có một phần tử không có nền.

Thiết lập của tôi là cái này cho mỗi mẫu và cả ba phần tử đều có màu nền được gán cho chúng:

<header></header> <body class="content"></body> <footer></footer>

— kenorvick
nguồn
0

Thay vì áp dụng quá trình chuyển đổi thành "tất cả", chỉ cần chỉ định cái bạn thực sự cần. Nó loại bỏ sự nhấp nháy trên trường hợp của tôi.

— Sylvestre Lucia
nguồn
0

Tôi đã thử tất cả các cách trên và vẫn gặp sự cố chập chờn lớn trên Firefox và Chrome. Tôi đã sửa nó, hoặc ít nhất là giảm đáng kể nó xuống một vấn đề có thể chấp nhận được bằng cách loại bỏ biến đổi bóng hộp gây ra nhiều lần sửa chữa trong hoạt ảnh. Tôi đã làm theo điều này và sửa đổi theo nhu cầu của mình:

http://tobiasahlin.com/blog/how-to-animate-box-shadow/

— d1ch0t0my
nguồn
0

đối với tôi, sự cố chập chờn trên safari đã được giải quyết bằng cách xóa will-change: transform; thành phần động.

Ngoài ra, tôi có thể giải quyết vấn đề này bằng cách thêm overflow: hidden;vào phụ huynh, nhưng với điều này, tất cả các phần tử transform: translateZ()có

— Mohsen.Khakbiz
nguồn
0

Tôi đã phải sử dụng một giá trị thực tế (thay vì 0):

.no-flick{
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transform:translateZ(0.1px);
    transform: translateZ(0.1px); /* needs an actual value */
}

Thí dụ:

<div class="foo no-flick"></div>

Từ những gì tôi đã đọc , hiện tượng nhấp nháy là do trình duyệt chuyển đổi giữa kết xuất phần cứng và phần mềm. Và tôi nghĩ rằng các nhà sản xuất trình duyệt đã biết đến "translate3d (0,0,0)" để buộc kết xuất phần cứng - vì vậy giờ đây họ có thể đang bỏ qua những giá trị giả mạo này.

=> Sử dụng một giá trị thực tế có thể khiến mọi thứ bị "dính".

Dù sao, đã làm việc cho tôi.

— bob
nguồn
0

Tôi đã gặp phải hiện tượng nhấp nháy khi thực hiện chuyển đổi trang trình bày khi sử dụng trình duyệt web Android mặc định.

Tôi đã sử dụng css chuyển tiếp sau:

-webkit-transition: all 2s;
-webkit-transform: translate(100%,0);

Không có cách giải quyết nào được đề cập trong chủ đề này đã giúp giải quyết vấn đề. Cuối cùng tôi đã tìm ra giải pháp. Nguồn nhấp nháy là từ khóa tất cả có nghĩa là thực hiện tất cả các chuyển đổi có thể có. Tôi đã thay đổi nó để chỉ thực hiện chuyển đổi và vấn đề đã được giải quyết:

-webkit-transition: -webkit-transform 2s;
-webkit-transform: translate(100%,0);
— Jusid
nguồn
0

Điều đã khắc phục đối với tôi là trì hoãn việc gán quy tắc CSS chuyển đổi-dịch. Một cái gì đó như thế này:

HTML:

<div class="animate-this loading"></div>

CSS:

.animate-this {
  &:not(.loading) {
    transform: -webkit-translate(50px);
    transform: translate(50px);
    transition: -webkit-transform 0.3s, transform 0.3s;
  }
}

JavaScript (jQuery):

$(document).ready(function(){
  window.setTimeout(function(){
    $('.animate-this').removeClass('loading');
  }, 250);
});

… Vì -webkit-backface-visibility: hidden;đã không làm gì cho tôi.

— WoodrowShigeru
nguồn
0

Vì vậy, tôi đã tìm thấy một bản sửa lỗi cho vấn đề này mà không có cách nào khác hoạt động bình thường.

CSS:

.ios-animation-fixer {
  position: fixed;
  width: 100%;
  height: 10px;
  top: -10px;
  background-color: green;
  z-index: 1;
  pointer-events: none;
  visibility: hidden;
}

HTML:

<div class="ios-animation-fixer"></div>

Sau đó, đặt z-indexcho phần tử hoạt hình của bạn là> 1. Điều này bằng cách nào đó đánh lừa các thiết bị iOS hiển thị hoạt ảnh theo cách khác và tránh nhấp nháy trong kịch bản của tôi. Điều chỉnh các giá trị z-index có thể hữu ích nếu giải pháp này không hoạt động ngoài cổng.

— Colin
nguồn
0

CẬP NHẬT 2019

Bạn có thể bật nhấp nháy bằng cách chỉ cần thêm các quy tắc này vào phần tử của bạn đang sử dụng chuyển tiếp.

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

Làm việc cho tôi trên Safarai

— Tự do09
nguồn
Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookie và Chính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.