Webkit: tăng tốc phần cứng CSS cho chuyển đổi 2D mà không sử dụng các thuộc tính 3D CSS

Question

Có khả năng tăng tốc phần cứng khi chuyển đổi 2D bằng CSS trong webkit mà không sử dụng 3D (ví dụ: translateZ(0)) (theo Are 2D transforms hardware accelerated in Mobile Safari?).

Tôi đang tìm kiếm các vấn đề với position: fixed yếu tố, trong đó yếu tố được thiết lập để một cái gì đó tương đương với position: absolute, vì vậy không vị trí tương đối so với khung nhìn, chứ không phải nó kết thúc tương đối vị trí tốt để container cha mẹ (như đã giải thích trong bài viết này http://meyerweb.com/eric/thoughts/2011/09/12/un-fixing-fixed-elements-with-css-transforms/).

Tôi đang chọn tăng tốc phần cứng vì nền có xu hướng nhấp nháy màu trắng trên các chuyển tiếp trong iOS, theo cách tương tự như lỗi này vạch ra https://github.com/jquery/jquery-mobile/issues/2856.

Answer 1

Bạn có thể thêm một 3d transform giá trị null trong Ngoài 2ngày của bạn thay đổi giá trị:

el { 
    transform: 2DValue(val) 3DValueSetToNull(0); 
    transform: 2DValue(val); 
} 

nào trong CSS thực có thể làm cho một cái gì đó như:

div { 
    /* translateZ(0) will not interfere with the rotate value */ 
    /* Also with -webkit-, -moz-, -o- */ 
    transform: rotate(90deg) translateZ(0); 
    /* Compatibility for older (yep) browsers */ 
    /* Also with -webkit-, -moz-, -ms-, -o- */ 
    transform: rotate(90deg); 
} 

Hãy chắc chắn để sử dụng một 3D biến đổi giá trị sẽ không can thiệp vào giá trị chuyển đổi 2D của bạn.

PS: Các 3d transform giá trị là:

• translate3d (x, y, z)
• translateZ (z)
• scale3d (sx, sy, sz)
• scaleZ (sz)
• rotateX (góc)
• rotateY (góc)
• rotate3d (x, y, z, góc),
01.
• quan điểm (p)
• matrix3d ​​(...)

Answer 2

Dường như thiết backface-visibility: hidden hiện các trick. Tôi đã xác nhận điều này chỉ cho chrome, sử dụng fps-counter.

.3d-accelerate { 
    backface-visibility: hidden; 
    -webkit-backface-visibility: hidden; 
} 

Bộ đếm FPS không hiển thị chỉ với transition. Nó hiển thị khi thêm translate: transform3d(0, 0, 0). Tôi cũng hiển thị chỉ với backface-visibility.