Phép thuật cơ bản của -webkit-backface-visibility

Question

Tôi muốn biết lý do tại sao webkit-backface-visibility giống như aspirin tất cả các mục đích giải quyết hoặc làm tồi tệ hơn tất cả các loại vấn đề không đồng nhất, chủ yếu liên quan đến hiện vật và nhấp nháy.

Tôi đã đọc và hiểu những gì thực sự backface-visibility là dành cho: Kiểm soát đối tượng xoay vòng 3D có thể hiển thị khi không nhìn vào màn hình. Có một tốt đẹp, straighforward bản demo here

Nhưng tôi tò mò tại sao, mỗi lần tôi có trục trặc kỳ lạ trong thế giới CSS, hoàn toàn không liên quan đến 3D quay và backfaces ẩn của họ, áp dụng backface-visibility đến lớp có vấn đề hoặc một trong của nó tổ tiên thường giúp hoặc làm mọi thứ tồi tệ hơn, nhưng hiếm khi không làm gì cả. Tôi đang nói về những thứ như

• Animations nhấp nháy
• lớp Cố định vấn đề Z-Index
• Display: none <> nhấp nháy có thể nhìn thấy và hiện vật
• cuộn nhấp nháy

Điều thú vị và luôn luôn trong kinh nghiệm khiêm nhường của tôi, backface-visibility:hidden có xu hướng giải quyết các nội dung liên quan đến vị trí cố định và backface-visibility:visible là "tốt nhất" để nhấp nháy. Cũng thú vị, trong Chrome và Safari các tác dụng phụ là khác nhau, nhưng cậu bé có!

Tôi đang làm việc trong trình tạo HTML trực quan, do đó, tình huống tôi đã có hiện tượng nhấp nháy/tạo hình khá phức tạp (ví dụ: hoạt ảnh trên nhiều lớp, div cuộn đằng sau các phần tử cố định, tuyệt đối cố định với chỉ mục z .. ..)

Mọi người đều có thể khai sáng cho tôi?

Answer 1

Tôi không chắc chắn những gì loại ma thuật bạn đang nói về, nhưng có một số trường hợp CSSbackface-visibility tài sản có thể giúp thúc đẩy DOM yếu tố để một lớp để trình duyệt có thể mất adventage của GPU trong khi hiển thị phần tử đó.

LƯU Ý: chỉ hidden giá trị sẽ thăng cấp lên một lớp không visible.

Cũng có những trường hợp thuộc tính này có thể sửa các cạnh lởm chởm xung quanh các phần tử. Tất cả đều nhờ vào hình ảnh GPU.

Có một số khác CSS thuộc tính hoạt động tương tự như translateZ(0) hoặc translate3d(0,0,0). Đây là tất cả các hack, và sẽ được thay thế bằng thuộc tính CSS mới will-change.

Nếu bạn đang làm hình ảnh động với CSS, lựa chọn tốt nhất về hiệu suất là thay đổi chỉ những CSS tính: transforms và opacity. Nhưng đây là chủ đề thay đổi và các trình duyệt liên tục thay đổi để điều này cũng có thể thay đổi trong tương lai. Mục đích là làm cho mọi thuộc tính CSS trở nên mượt mà nhất có thể (lý tưởng ở 60FPS) trong khi hoạt ảnh.Tôi biết rằng nhóm Chrome đang làm việc rất chăm chỉ, nhưng không chắc chắn về các nhà cung cấp khác.