Câu hỏi Văn bản mờ sau khi sử dụng CSS transform: scale (); trong Chrome


Có vẻ như đã có bản cập nhật gần đây cho Google Chrome gây ra văn bản mờ sau khi thực hiện transform: scale(). Cụ thể tôi đang làm điều này:

@-webkit-keyframes bounceIn {
  0% {
    opacity: 0;
    -webkit-transform: scale(.3);
  }

  50% {
    opacity: 1;
    -webkit-transform: scale(1.05);
  }

  70% {
    -webkit-transform: scale(.9);
  }

  100% {
    -webkit-transform: scale(1);
  }
}

Nếu bạn ghé thăm http://rourkery.com trong Chrome, bạn sẽ thấy sự cố trên vùng văn bản chính. Nó không được sử dụng để làm điều này và nó dường như không ảnh hưởng đến các trình duyệt webkit khác (như Safari). Có một số bài viết khác về những người gặp vấn đề tương tự với các biến đổi 3d, nhưng không thể tìm thấy bất cứ điều gì về biến đổi 2d như thế này.

Bất kỳ ý tưởng sẽ được đánh giá cao, cảm ơn!


76
2018-02-03 21:26


gốc


Chỉ cần truy cập trang web bằng Firefox và IE 10, không thấy vấn đề. Nếu nó bị giới hạn trong Chrome, bạn có thể cần phải chờ Google tự khắc phục. - Nolonar
Tôi không thấy bất kỳ làm mờ ... tôi đang sử dụng Chrome v25 / PC - vsync
Tôi đã đi qua vấn đề này trước đó, như Nolonar đã đề cập, chúng tôi sẽ phải chờ Google sửa chữa nó. - raj_n
Để giúp bạn tiết kiệm rất nhiều thời gian: Kể từ ngày 29 tháng 3 năm 2018, không có giải pháp nào được đề xuất trong chuỗi này đang hoạt động cho tôi. Tôi đang chạy phiên bản 63.0.3239.84 trên Ubuntu 17.04 (64 bit). - balu


Các câu trả lời:


Tôi đã có vấn đề này một số lần và có vẻ như có 2 cách để sửa chữa nó (hiển thị dưới đây). Bạn có thể sử dụng một trong các thuộc tính này để sửa chữa hiển thị hoặc cả hai cùng một lúc.

Khả năng hiển thị Backface ẩn khắc phục sự cố vì nó đơn giản hóa hoạt ảnh ở phía trước đối tượng, trong khi trạng thái mặc định là mặt trước và mặt sau.

backface-visibility: hidden;

TranslateZ cũng hoạt động vì nó là một hack để tăng tốc phần cứng cho hoạt hình.

transform: translateZ(0);

Cả hai thuộc tính này đều khắc phục được sự cố mà bạn đang gặp phải nhưng một số người cũng muốn thêm

-webkit-font-smoothing: subpixel-antialiased;

để hoạt hình của họ để phản đối. Tôi thấy rằng nó có thể thay đổi kết xuất phông chữ trên web nhưng cũng cảm thấy tự do để thử nghiệm với phương thức đó.


49
2018-06-02 00:24



Những kỹ thuật này dường như cải thiện mọi thứ, nhưng tôi vẫn không thể đưa Chrome đến cùng mức độ rõ ràng mà tôi thấy trong Firefox. - Michael Martin-Smucker
không làm việc cho tôi - avalanche1
Có vẻ như nó không hoạt động nữa - Adam Wolski
backface-visibility: hidden; chắc chắn đã làm việc trong trường hợp của tôi, trong việc giải quyết một số chuyển động mờ kỳ lạ gây ra bởi sự chuyển đổi độ mờ đục, đó là. Chuyển động kỳ lạ bây giờ đã biến mất, NHƯNG nó đã làm cho các văn bản trong div của tôi vĩnh viễn mờ thay vào đó. - ITWitch
Như @ykadaru đề xuất, hãy thử thêm perspective(1px) cho bạn transform: mã, điều này làm việc cho tôi trong Chrome trong khi không có gì khác giải quyết được vấn đề - Serge Eremeev


Thay vì

transform: scale(1.5);

sử dụng

zoom : 150%;

khắc phục sự cố làm mờ văn bản trong Chrome.


9
2018-02-28 19:56



Nó có thể giúp nhưng cũng giới thiệu các vấn đề khác, như đường viền màu trắng được giới thiệu đôi khi - Kevin
không chắc chắn tại sao downvote. Khi tôi áp dụng điều này cho các hộp kiểm, điều này làm việc tốt hơn nhiều so với biến đổi: scale () - Brian McCall
Đối với firefox, sử dụng transform: scale () hoạt động như nét duyên dáng mà không bị mờ. Bạn sẽ phải làm việc trên phát hiện trình duyệt và hành động phù hợp cho chrome / safari và firefox. - Naisheel Verdhan
Một vấn đề khác là việc thu phóng dường như không hoạt động với thuộc tính chuyển tiếp, vì vậy nó không thể được sử dụng cho hoạt ảnh CSS - ericgrosse
Nó hoạt động và cáo điều mờ ảo, nhưng nó cũng thay đổi vị trí của các nguyên tố. - user1156544


Tôi thấy rằng việc điều chỉnh tỷ lệ tỷ lệ đã giúp một chút.

Sử dụng scale(1.048) kết thúc (1.05) dường như tạo ra xấp xỉ tốt hơn cho kích thước phông chữ toàn bộ pixel, làm giảm làm mờ pixel phụ.

Tôi cũng đã sử dụng translateZ(0) dường như điều chỉnh bước làm tròn cuối cùng của Chrome trong hoạt ảnh chuyển đổi. Đây là một lợi thế để sử dụng onhover của tôi bởi vì nó làm tăng tốc độ và giảm tiếng ồn trực quan. Đối với một chức năng onclick tuy nhiên, tôi sẽ không sử dụng nó bởi vì, các font chuyển đổi không xuất hiện để được như giòn.


6
2018-02-03 22:46



WOW, mà freaking làm việc: D - agrublev
Đó là cách tiếp cận duy nhất có hiệu quả đối với tôi. Các phương pháp tiếp cận khác (khả năng hiển thị mặt sau, thêm bộ lọc, phối cảnh và dịch cũ tốt) chỉ làm cho nó tồi tệ hơn. Thử mở rộng toàn bộ pixel. Ví dụ: từ 14px đến 16px sử dụng hệ số tỷ lệ là 1.1429 (16/14). - hugo der hungrige


Sunderls dẫn tôi đến câu trả lời. Ngoại trừ filter: scale không tồn tại, nhưng filter: blur làm.

Áp dụng các khai báo tiếp theo cho các phần tử xuất hiện mờ (trong trường hợp của tôi chúng nằm bên trong một phần tử được biến đổi):

backface-visibility: hidden;    
-webkit-filter: blur(0);

hầu hết làm việc hoàn hảo. "Hầu hết"bởi vì tôi đang sử dụng một quá trình chuyển đổi và trong khi đang chuyển đổi, các phần tử trông không hoàn hảo, nhưng một khi quá trình chuyển đổi được thực hiện, chúng thực hiện.


5
2017-12-10 18:25



-webkit-filter: blur(0); một mình làm việc cho tôi. backface-visibility: hidden; làm mờ phần tử của tôi khi tôi thiết lập lại quy mô sau đó. - Kai Hartmann
điều này khá thú vị đối với Chrome ... nếu tôi đặt blur(0px); nó không sửa chữa nó. nhưng nếu tôi làm blur(1px);và sau đó nhấn phím mũi tên xuống blur(0px); nó trông đúng. Biến đổi trên trang làm mới / không có vấn đề gì tôi viết trong CSS - Tom Roggero
@TomRoggero Điều này âm thanh ít cụ thể hơn cho giá trị thuộc tính mờ và nhiều hơn nữa khi vẽ lại bố cục được thực hiện. Bạn có thể thử nghiệm buộc vẽ lại phần tử bằng JavaScript sau một số thời gian trễ. - Gajus


Để cải thiện sự mờ nhạt, đặc biệt. trên Chrome, hãy thử làm điều này:

transform: perspective(1px) translateZ(0);
backface-visibility: hidden;

4
2017-12-05 20:51



Đối với tôi, điều này thực sự làm cho nó tồi tệ hơn. - balu


Đây phải là lỗi với Chrome (Phiên bản 56.0.2924.87), nhưng dưới đây khắc phục sự mờ nhạt đối với tôi khi thay đổi thuộc tính css trong bảng điều khiển ('. 0'). Tôi sẽ báo cáo.

filter: blur(.0px)

4
2018-03-31 10:34





Thử sử dụng zoom: 101%; cho các thiết kế phức tạp khi bạn không thể sử dụng kết hợp quy mô zoom +.


3
2017-09-30 07:17



Không hoạt động trong firefox - Dustin Poissant


Trong trường hợp của tôi, mã sau gây ra phông chữ mờ:

-webkit-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);

và chỉ cần thêm thuộc tính thu phóng đã sửa nó cho tôi. Chơi xung quanh với zoom, sau đây làm việc cho tôi:

zoom: 97%;   

2
2018-01-04 17:10



Không hỗ trợ firefox cho zoom - Dustin Poissant


Tôi phát hiện ra rằng vấn đề xảy ra trên các biến đổi tương đối theo bất kỳ cách nào. translateX (50%), tỷ lệ (1.1) hoặc bao giờ. cung cấp các giá trị tuyệt đối luôn hoạt động (không tạo ra văn bản mờ (ures)).

Không có giải pháp nào đề cập đến ở đây đã hiệu quả và tôi nghĩ rằng chưa có giải pháp nào (sử dụng Chrome 62.0.3202.94 trong khi tôi đang viết bài này).

Trong trường hợp của tôi transform: translateY(-50%) translateX(-50%) gây mờ (tôi muốn căn giữa hộp thoại).

Để đạt được các giá trị "tuyệt đối" hơn một chút, tôi phải đặt giá trị thập phân thành transform: translateY(-50.09%) translateX(-50.09%).

CHÚ THÍCH

Tôi khá chắc chắn rằng giá trị này thay đổi tùy theo kích thước màn hình khác nhau. Tôi chỉ muốn chia sẻ kinh nghiệm của tôi, trong trường hợp nó giúp ai đó.


1
2017-11-29 08:27





Đối với tôi vấn đề là các yếu tố của tôi đã sử dụng transformStyle: preserve-3d. Tôi nhận ra rằng điều này không thực sự cần thiết cho ứng dụng và xóa nó đã khắc phục được sự mờ nhạt.


0
2017-07-13 09:42





Không ai ở trên làm việc cho tôi. Tôi đã có hoạt ảnh này cho cửa sổ bật lên:

@keyframes pulse {
  from {
    transform: scale3d(1, 1, 1);
  }
  50% {
    transform: scale3d(1.05, 1.05, 1.05);
  }
  to {
    transform: scale3d(1, 1, 1);
  }
}

Trong trường hợp của tôi hiệu ứng mờ đã biến mất sau khi áp dụng quy tắc này: -webkit-perspective: 1000; mặc dù nó được đánh dấu là không sử dụng trong thanh tra Chrome.


0
2017-07-28 15:32