Văn bản mờ sau khi sử dụng biến đổi CSS: scale (); trong Chrome

Có vẻ như đã có một 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 truy cập 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à dường như nó 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 phải 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ề các biến đổi 2d như thế này.

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

Tôi đã gặp vấn đề này một số lần và dường như có 2 cách khắc phục (hiển thị bên dưới). Bạn có thể sử dụng một trong hai thuộc tính này để sửa lỗi kết xuất 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 hình ảnh động chỉ ở phía trước của đố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ì đây là một bản hack để thêm khả năng tăng tốc phần cứng cho hình ảnh động.

transform: translateZ(0);

Cả hai thuộc tính này đều khắc phụ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 của một phông chữ web nhưng cũng thoải mái thử nghiệm phương pháp đó.

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

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

CẬP NHẬT: Phối cảnh thêm khoảng cách giữa người dùng và mặt phẳng z, về mặt kỹ thuật quy mô đối tượng, làm cho độ mờ dường như 'vĩnh viễn'. Ở perspective(1px)trên giống như băng vịt vì chúng tôi phù hợp với độ mờ mà chúng tôi đang cố gắng giải quyết. Bạn có thể có may mắn hơn với css dưới đây:

transform: translateZ(0);
backface-visibility: hidden;

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

Sử dụng scale(1.048) hơn(1.05) dường như để tạo ra một xấp xỉ tốt hơn để một cỡ chữ toàn-pixel, giảm sub-pixel mờ.

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 điểm cộng cho việc sử dụng onhover của tôi vì nó tăng tốc độ và giảm nhiễu hình ảnh. Tuy nhiên, đối với chức năng onclick, tôi sẽ không sử dụng nó bởi vì, phông chữ được chuyển đổi dường như không giòn.

Sau khi thử tất cả mọi thứ khác ở đây không có may mắn, những gì cuối cùng cố định vấn đề này đối với tôi là loại bỏ các will-change: transform;tài sản. Vì một số lý do, nó đã gây ra hiện tượng mờ ảo khủng khiếp trong Chrome, nhưng không phải Firefox.

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.

Đây phải là một lỗi với Chrome (Phiên bản 56.0.2924.87), nhưng phần dưới đây khắc phục sự mờ cho 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 nó.

filter: blur(.0px)

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

Á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 trong phần tử được chuyển đổi):

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

Nó gần như làm việc hoàn hảo. " Hầu như " bởi vì tôi đang sử dụng một quá trình chuyển đổi và trong khi chuyển đổi, các yếu 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 sẽ thực hiện.

Tôi phát hiện ra rằng vấn đề xảy ra đối với các biến đổi tương đối theo bất kỳ cách nào. dịchX (50%), tỷ lệ (1.1) hoặc những gì đã từng. 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 ở đây có hiệu quả và tôi nghĩ chưa có giải pháp nào (sử dụng Chrome 62.0.3202.94 trong khi tôi viết bài này).

Trong trường hợp của tôi transform: translateY(-50%) translateX(-50%)gây ra mờ (tôi muốn tập trung vào một hộp thoại).

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

GHI CHÚ

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

Tôi đã tìm thấy một giải pháp tốt hơn và sạch hơn:

.element{
 transform:scale(0.5) 
 transform-origin: 100% 0;
}

hoặc là

.element{
 transform:scale(0.5) 
 transform-origin: 0% 0;
}

Nhờ bài đăng này: Ngăn chặn kết xuất mờ với biến đổi: scale

Thêm perspective(1px)làm việc cho tôi.

transform: scale(1.005);

đến

transform: scale(1.005) perspective(1px);

Hãy 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 tỷ lệ thu phóng +.

Trong trường hợp của tôi, đoạn 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%;   

Một cách khắc phục khác để thử tôi vừa tìm thấy cho các biến đổi mờ (translate3d, scaleX) trên Chrome là đặt thành phần là " display: inline-table ;". Nó dường như buộc làm tròn pixel trong một số trường hợp (trên trục X).

Tôi đọc định vị subpixel trong Chrome đã được dự định và các nhà phát triển sẽ không sửa nó.

Cập nhật 2019
Lỗi hiển thị Chrome vẫn chưa được sửa và mặc dù không có lỗi của khách hàng quen, nhưng không có đề xuất nào được cung cấp trong toàn bộ trang web này giúp giải quyết vấn đề. Tôi có thể đồng ý rằng tôi đã thử mọi thứ trong số chúng một cách vô ích: chỉ có 1 đến gần và đó là quy tắc css: filter: Blur (0); giúp loại bỏ sự dịch chuyển của vùng chứa 1px nhưng không khắc phục lỗi hiển thị mờ của chính vùng chứa và bất kỳ nội dung nào có thể có.

Đây là thực tế: thực sự không có cách khắc phục vấn đề này vì vậy đây là một cách giải quyết cho các trang web chất lỏng

CASE
Tôi hiện đang phát triển một trang web chất lỏng và có 3 div, tất cả đều tập trung vào hiệu ứng di chuột và chia sẻ các giá trị phần trăm theo cả chiều rộng và vị trí. Lỗi Chrome xảy ra trên bộ chứa trung tâm được đặt ở bên trái: 50%; và biến đổi: translateX (-50%); một thiết lập chung.

VÍ DỤ: Đầu tiên HTML ...

<div id="box1" class="box">
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry"s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
</div>

<div id="box2" class="box">
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry"s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
</div>

<div id="box3" class="box">
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry"s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
</div>

Đây là CSS nơi xảy ra lỗi Chrome ...

*{margin:0; padding:0; border:0; outline:0; box-sizing:border-box;  background:#505050;}
.box {position:absolute; border:1px solid #fff; border-radius:10px; width:26%; background:#8e1515; padding:25px; top:20px; font-size:12pt; color:#fff; overflow:hidden; text-align:center; transition:0.5s ease-in-out;}
.box:hover {background:#191616;}
.box:active {background:#191616;}
.box:focus {background:#191616;}
#box1 {left:5%;}
#box2 {left:50%; transform:translateX(-50%);} /* Bugged */
#box3 {right:5%;}

Đây là css cố định ...

*{margin:0; padding:0; border:0; outline:0; box-sizing:border-box;  background:#505050;}
.box {position:absolute; border:1px solid #fff; border-radius:10px; width:26%; background:#8e1515; padding:25px; top:20px; font-size:12pt; color:#fff; overflow:hidden; text-align:center; transition:0.5s ease-in-out;}
.box:hover {background:#191616;}
.box:active {background:#191616;}
.box:focus {background:#191616;}
#box1 {left:5%;}
#box2 {left:37%;} /* Fixed */
#box3 {right:5%;}

Fiddle bị lỗi: https://jsfiddle.net/m9bgrunx/2/
Fiddle cố định: https://jsfiddle.net/uoc6e2dm/2/

Như bạn có thể thấy một lượng nhỏ tinh chỉnh cho CSS sẽ giảm hoặc loại bỏ yêu cầu sử dụng biến đổi để định vị. Điều này cũng có thể áp dụng cho các trang web có chiều rộng cố định cũng như chất lỏng.

Tôi có cùng vấn đề này. Tôi đã sửa lỗi này bằng cách sử dụng:

.element {
  display: table
}

Không ai ở trên làm việc cho tôi. Tôi đã có hoạt hì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 được sử dụng trong trình kiểm tra Chrome.

Giải pháp của tôi là:

hiển thị: ban đầu;

Sau đó nó được giòn

Không ai ở trên làm việc cho tôi.

Nó hoạt động khi tôi thêm quan điểm

tức là từ

transform : translate3d(-10px,-20px,0) scale3d(0.7,0.7, 1)

tôi đã đổi thành

transform : perspective(1px) translate3d(-10px,-20px,0) scale3d(0.7,0.7, 1)

Tôi đã sửa trường hợp của mình bằng cách thêm:

transform: perspective(-1px)

CHO CHORME:

Tôi đã thử tất cả các đề xuất ở đây. Nhưng không hoạt động. Trường đại học của tôi tìm thấy một giải pháp tuyệt vời, hoạt động tốt hơn:

Bạn KHÔNG nên vượt quá 1.0

Và bao gồm translateZ(0) trong di chuột nhưng KHÔNG ở vị trí không di chuột / ban đầu.

Thí dụ:

a {
    transition: all 500ms cubic-bezier(0.165, 0.840, 0.440, 1.000);
    transform: scale(0.8, 0.8);
}

a:hover {
    transform: translateZ(0)scale(1.0, 1.0);
}

Tôi đã sử dụng kết hợp tất cả các câu trả lời và đây là điều làm việc cho tôi cuối cùng:

.modal .modal--transition {
  display: inline-table;
  transform: perspective(1px) scale(1) translateZ(0);
  backface-visibility: hidden;
  -webkit-font-smoothing: subpixel-antialiased;
}

Tôi đã phải đối mặt với vấn đề văn bản mờ trên Chrome nhưng không phải trên Firefox khi tôi sử dụng transform: translate(-50%,-50%).

Chà, tôi thực sự đã thử rất nhiều cách giải quyết như:

transform: perspective(1px);

filter: blur(0);

transform: translateZ(0);

backface-visibility: hidden;

Không ai trong số này làm việc với tôi.

Cuối cùng, tôi đã làm cho chiều cao và chiều rộng của phần tử chẵn. Nó giải quyết vấn đề cho tôi !!!

Lưu ý: Nó có thể phụ thuộc từ ca sử dụng đến ca sử dụng. Nhưng chắc chắn đáng để thử!

Tôi đã thử rất nhiều ví dụ từ những câu trả lời này, thật không may, không có gì giúp được cho Chrome. Version 81.0.4044.138 Tôi đã thêm vào phần tử chuyển đổi

 transform-origin: 50% 50%;

cái này

 transform-origin: 51% 51%;

nó giúp cho tôi

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

Tôi đã xóa mã này khỏi mã của mình - transform-style: preserve-3d; và đã thêm mã nàytransform: perspective(1px) translateZ(0);

sự mờ ảo đã biến mất!

Trong Chrome 74.0.3729.169, hiện tại từ ngày 5-25-19, dường như không có bất kỳ sửa chữa nào cho việc làm mờ xảy ra ở các mức thu phóng trình duyệt nhất định do biến đổi gây ra. Ngay cả một đơn giản TransformY(50px)sẽ làm mờ các yếu tố. Điều này không xảy ra trong các phiên bản hiện tại của Firefox, Edge hoặc Safari và dường như nó không xảy ra ở tất cả các mức thu phóng.

Sẽ rất khó để giải quyết chỉ với css.

Vì vậy, tôi đã giải quyết nó với jquery.

Đây là CSS của tôi.

.trY {
   top: 50%;
   transform: translateY(-50%);
}

.trX {
   left: 50%;
   transform: translateX(-50%);
}

.trXY {
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
}

và đây là trò đùa của tôi

function tr_init() {
$(".trY, .trX, .trXY").each(function () {
    if ($(this).outerWidth() % 2 != 0) {
        var fixed_width = Math.ceil($(this).outerWidth() / 2) * 2;
        $(this).css("width", fixed_width);
    }
    if ($(this).outerHeight() % 2 != 0) {
        var fixed_height = Math.ceil($(this).outerHeight() / 2) * 2;
        $(this).css("height", fixed_height);
    }
})}

Chỉ cần thêm vào cơn sốt sửa chữa, đặt {Border: 1px solid # ???} xung quanh đối tượng có giao diện xấu sẽ khắc phục sự cố cho tôi. Trong trường hợp bạn có màu nền ổn định, hãy xem xét điều này. Điều này thật ngu ngốc không ai nghĩ đến việc đề cập đến tôi đoán, eh eh.

bạn có thể sử dụng css filterđể sửa lỗi này.

.element {
    filter: blur(0);
}

về tiền tố nhà cung cấp, xin vui lòng tự làm. -webkit-filter, -ms-filter. chi tiết ở đây http://browser.colla.me/show/css_transatures_scale_cause_blurring

Các văn bản sẽ không bị mờ nếu bạn không transitionnhữngtransform .

Chỉ cần làm điều này:

&:hover {
    transform: scale(1.1);
}

Không có sự chuyển đổi như transition: all .2s;