WebKit: Văn bản mờ với css scale + translate3d

Question

Tôi đang gặp sự cố khi Chrome và các trình duyệt WebKit khác làm mờ bất kỳ nội dung có kích thước css nào cũng đã dịch3d.

Đây là JS Fiddle: http://jsfiddle.net/5f6Wg/. (Xem trong Chrome.)

.test { 
 
    -webkit-transform: translate3d(0px, 100px, 0px); 
 
} 
 

 
.testInner 
 
{ 
 
    /*-webkit-transform: scale(1.2);*/ 
 
    -webkit-transform: scale3d(1.2, 1.2, 1); 
 
    text-align: center; 
 
}

<div class="test"> 
 
    <div class="testInner"> 
 
    This is blurry in Chrome/WebKit when translate3d and scale or scale3d are applied. 
 
    </div> 
 
</div>

Có bất kỳ cách giải quyết nổi tiếng về điều này? Tôi nhận được điều đó trong ví dụ đơn giản ở trên, tôi chỉ đơn giản có thể sử dụng dịch thay vì dịch3d - điểm ở đây là để cắt mã xuống các yếu tố cần thiết trần.

Answer 1

Webkit xử lý các phần tử được biến đổi 3D làm họa tiết thay vì vectơ để cung cấp khả năng tăng tốc phần cứng 3d. Giải pháp duy nhất cho điều này là tăng kích thước của văn bản và giảm kích thước phần tử, trong bản chất tạo ra một kết cấu res cao hơn.

Xem ở đây: http://jsfiddle.net/SfKKv/

Lưu ý rằng khử răng cưa vẫn còn underpar (xuất phát là mất) vì vậy tôi tăng cường lên các văn bản với một chút bóng văn bản.

Answer 2

Webkit xử lý các phần tử được chuyển đổi 3D làm họa tiết thay vì vectơ để cung cấp tăng tốc phần cứng 3d.

Điều này không liên quan gì đến nó. Bạn sẽ nhận thấy rằng vấn đề bí danh của bạn có thể được khắc phục bằng việc thêm thông tin về thời lượng và hướng (ví dụ: 0,3 tuyến tính). Bạn có một con ngựa cố gắng để render tất cả mọi thứ trong thời gian chạy:

Tương tự cho ở trên^

Answer 3

body { 
-webkit-font-smoothing: subpixel-antialiased; 
} 

hoặc tôi nghĩ bạn có thể đặt trên một yếu tố cụ thể, nhưng tôi đã gặp vấn đề với một yếu tố ảnh hưởng đến toàn bộ trang web.

Tôi nghĩ rằng đó là vấn đề với phông chữ phông chữ tùy chỉnh.

Answer 4

Tôi gặp phải vấn đề này khi sử dụng plugin đồng vị (http://isotope.metafizzy.co/index.html) kết hợp với plugin thu phóng (http://janne.aukia.com/zoomooz/). Tôi đã xây dựng một plugin jquery để xử lý trường hợp của mình. Tôi đã ném nó lên trong một repo github trong trường hợp ai cũng có thể hưởng lợi từ nó. - https://github.com/charleshimmer/jquery-hirestext.

Answer 5

tôi thấy rằng việc sử dụng:

-webkit-perspective: 1000; 

trên thùng của phông chữ của bạn hoặc biểu tượng bộ giữ mọi thứ rõ nét đối với tôi sau khi thử nghiệm với các vấn đề về mối quan hệ Android 4.2 cho sometime.

Answer 6

Hiệu ứng lọc css là hoạt động đồ họa cho phép thao tác với sự xuất hiện của bất kỳ phần tử HTML nào. Vì Chromium 19 các bộ lọc này là GPU tăng tốc để làm cho chúng siêu nhanh.

CSS3 giới thiệu một loạt các hiệu ứng bộ lọc tiêu chuẩn, một trong số họ là fitler mờ:

-webkit-filter: blur(radius); 

Tham số 'bán kính' ảnh hưởng đến bao nhiêu điểm ảnh trên pha trộn màn hình vào nhau, vì vậy một giá trị lớn hơn sẽ tạo ra nhiều mờ hơn. Không, tất nhiên để lại hình ảnh không thay đổi.

Đặt bán kính thành 0 sẽ buộc trình duyệt sử dụng tính toán GPU và buộc nó giữ nguyên tố html của bạn không thay đổi. Nó giống như áp dụng hiệu ứng "cạnh cứng".

Vì vậy, giải pháp tốt nhất cho tôi để sửa chữa hiệu ứng mờ này là để thêm dòng đơn giản mã này:

-webkit-filter: blur(0); 

Ngoài ra còn có một lỗi được biết rằng chỉ ảnh hưởng đến màn hình võng mạc. (Xem tại đây: Why doesn't blur(0) remove all text blur in Webkit/Chrome on retina screens?). Vì vậy, để làm cho nó hoạt động cũng cho võng mạc, tôi khuyên bạn nên để thêm dòng thứ hai này:

-webkit-transform: translateZ(0); 

Answer 7

tôi đã sử dụng javascript để di chuyển phía trên văn bản 1px và sau đó với 100ms sau, lưng 1px xuống. Nó gần như không nhận thức và giải quyết vấn đề hoàn toàn qua trình duyệt.

Answer 8

Hãy thử điều này

...{ 
zoom:2; 
-webkit-transform: scale(0.5); 
transform: scale(0.5); 
} 

Hoặc cho một cách tiếp cận chính xác hơn bạn có thể gọi một hàm javascript để tính toán lại các ma trận chuyển đổi bằng cách loại bỏ các giá trị thập phân của ma trận. xem: https://stackoverflow.com/a/42256897/1834212