Nhấp nháy CSS3 trong Safari 6 trên OSX (nhưng đây không phải là vấn đề nhấp nháy màu trắng!)

Question

Sự cố này không xuất hiện trên iOS hoặc trên Chrome do đó nó không phải là vấn đề liên quan đến Webkit. Nó có vẻ là cụ thể cho Safari 6.0.2 mới nhất trên OS X 10.8.2 (và không được sửa bởi 10.8.3 xem trước xây dựng 12D65 đi kèm với Safari 6.0.3). Tôi sẽ thử nghiệm trên Lion 10.7.5 với Safari 6.0.2 trong thời gian ngắn, và cũng sẽ được thử nghiệm trên xem trước xây dựng 12D68 là tốt.

http://jsfiddle.net/zrr2b/

Đây là một fiddle mà làm cho vấn đề khá rõ ràng. Nếu bạn có một máy Mac chạy ML, bạn sẽ thấy sự khác biệt đáng kể giữa Chrome và Safari, nơi Safari nhấp nháy số lô khi bạn di chuyển chuột xung quanh.

Về cơ bản vấn đề là Safari sẽ liên tục vẽ chuyển đổi mục tiêu được đặt từ JS cho một khung duy nhất, sau đó tiếp tục hoạt ảnh chuyển tiếp. Điều này gây ra một nhấp nháy, nhưng chỉ khi quá trình chuyển đổi đang diễn ra ở đâu đó để bắt đầu. Vì vậy, lỗi sẽ không làm cho đầu của nó xấu đi (không sử dụng nhiều) CSS3, nhưng nếu chức năng hoặc hiệu ứng hình ảnh phụ thuộc vào nó để nội suy thuận lợi cho mục tiêu (như dự án hiện tại của tôi) thì nhấp nháy này không dễ chịu.

tôi đã xem xét chủ đề tương tự liên quan đến bập bùng và áp dụng khá nhiều tất cả các kết hợp của phong cách để chống leo lét, chẳng hạn như -webkit-backface-visibility: hidden, buộc các yếu tố cha mẹ khác nhau để đạt được khả năng tăng tốc phần cứng, -webkit-transform-style: preserve-3d, -webkit-perspective: 1000, và không ai trong số họ không may làm bất cứ điều gì để giải quyết vấn đề cụ thể về nhấp nháy của Safari, tức là nhấp nháy không trắng hoặc trống, nhưng nhấp nháy để chuyển đổi mục tiêu cho một khung đơn.

Ở đây trong nhánh này bạn có thể thấy tôi thiết lập một loạt các kiểu giúp "nhấp nháy thường xuyên" nhưng không có tác dụng đối với tôi. http://jsfiddle.net/zrr2b/1/

Vì đây không phải là vấn đề cụ thể về webkit, tôi không chắc chắn nên đăng bài báo cáo lỗi ở đâu. Nó sẽ được đặc biệt tốt đẹp để có được điều này trong trước khi phát hành 10.8.3 kể từ khi tôi thấy điều này như là một vấn đề khá lớn. Hãy nhớ rằng, đây là loại điều mà chúng tôi đang phụ thuộc vào HTML5 để làm tốt để cho nó thực sự giết Flash.

Cập nhật:

• Safari Version 6.0.3 (8536.28.10) trên Mountain Lion 10.8.3 12D68 (Retina Macbook Pro 15.4") vẫn bị vấn đề này
• Safari trên Windows (5.1.7) không bị lỗi này
• Safari Version 6.0.2 (7536.26.17) trên Lion 10.7.5 (Macbook Air Mid 2011) không bị lỗi này

Answer 1

T đây là một vài cách khác nhau để thử nghiệm với việc giảm nhấp nháy. Tuy nhiên, vấn đề lớn là họ dường như bị "đánh và bỏ lỡ". Vì vậy, bạn phải thử một vài để xem cái nào giúp giải quyết vấn đề.

Nhưng họ xoay quanh những điều tương tự:

-webkit-transform: translateZ(0); /* triggers GPU, sometimes fixes the issue */ 
transform: translateZ(0); /* non-webkit specific */ 

Nếu điều này không hoàn toàn làm các việc lừa, hãy thử:

-webkit-backface-visibility: hidden; 
backface-visibility: hidden; 
-webkit-perspective: 1000; 
perspective: 1000; 

Nếu đây cũng thất bại, hãy thử này:

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

Bạn có thể đọc về từng người trong số họ thông qua W3C. Nhưng tất cả họ đều đã làm việc cho tôi trong những hoàn cảnh khác nhau với những hình ảnh không linh hoạt, và những hình ảnh nhấp nháy, bao gồm một số hình ảnh rất kỳ quặc, nhảy xa hơn nhiều so với câu đố của bạn.

Chúng sẽ hoạt động trong div.