Câu hỏi -webkit-transform rotate - Hình ảnh được pixel hóa trong Chrome


Sử dụng -webkit-transform: rotate(-5deg); trên div vùng chứa, Chrome hiển thị lưới hình ảnh với các cạnh có răng cưa thực sự. Trong khi đó trong FF (-moz-transform:) và IE (-ms-filter:) mọi thứ đều ổn - hãy xem sự khác biệt bên dưới.

Có điều gì tôi có thể làm được không?

chrome ff


33
2018-02-22 12:36


gốc


-webkit-renders trong FF và IE? - Kyle
sử dụng: -ms-filter và -moz-transform - davivid
Aha ok :) jsfiddle.net/Kyle_Sevenoaks/RGRey trông giống với tôi trong FF và Chrome, Chrome có bị thu nhỏ không? - Kyle
không phóng to, văn bản và các yếu tố khác tất cả dường như là ok ở nơi khác - nó chỉ trên hình ảnh có vẻ như - xin vui lòng xem ở trên - davivid
có thể trùng lặp css biến đổi, cạnh lởm chởm trong chrome - Frank van Puffelen


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


Bạn có thể xem câu trả lời cho câu hỏi css biến đổi, cạnh lởm chởm trong chrome

Giúp tôi

Từ câu trả lời được chấp nhận:

Trong trường hợp ai đó tìm kiếm điều này sau này, một mẹo hay để thoát khỏi   các cạnh lởm chởm trên các biến đổi CSS trong Chrome là thêm   Thuộc tính CSS -webkit-backface-visibility với một giá trị hidden.   Trong các thử nghiệm của riêng tôi, điều này đã hoàn toàn làm mịn chúng. Hy vọng rằng   giúp.


68
2017-08-14 14:06



Câu trả lời này nên được đánh dấu là câu trả lời hay nhất. - android.nick
Đồng ý với @ android.nick - Hezad
Nó hoạt động! Họ thực sự nên sửa lỗi này, mặc dù nó được đánh dấu là 'cố định', rõ ràng là không phải do sự khác biệt mà bạn nhận thấy khi áp dụng thuộc tính css được đề cập ở trên. - starbeamrainbowlabs
Giải pháp này có thể gây ra các điểm ảnh "chết" trong hình ảnh được xoay trong suốt nếu bạn xoay nó qua lại. - Kamil Szot
Hãy thử SVG. Đây là cách để làm điều đó codepen.io/Izaias/pen/WvWxxv - Izaias


Nó dường như là một Antialiasing lỗi trong công cụ webkit. Báo cáo đã được gửi nhưng chưa được giải quyết.

Bạn có thể thử thêm một đường viền có màu giống như nền của bạn để cố gắng giảm thiểu hiệu ứng.


14
2018-02-22 13:00



ok cảm ơn, ban đầu tôi đã có biên giới nhưng đã hy vọng không có chúng, nó làm giảm hiệu lực phần nào mặc dù - davivid
Không có vấn đề, vui mừng nó đã giúp :) - Kyle
trong thiết kế ban đầu một đường viền css trắng đã giúp rất nhiều, nhưng một đường viền màu đen không giúp được gì nhiều trong phiên bản này. Nhưng bằng cách cung cấp cho các hình ảnh thực tế các tập tin một biên giới màu đen 2px vấn đề được giải quyết. - davivid
Trong bình luận cuối cùng đây bạn có thể thấy rằng việc gửi phần tử đến thông qua GPU sẽ nhận được giải pháp thay thế. Bạn phải làm một cái gì đó như thế này: xoay (90deg) translateZ (0) - Julio García
Cách giải quyết này hoạt động hoàn hảo. Cảm ơn Julio. - leon


-webkit-transform: rotate(-5deg) translate3d( 0, 0, 0);

Liệu các trick cho chrome.


6
2017-08-15 08:44





Bạn đã thử quy tắc CSS chưa -webkit-transform-style: preserve-3d;?

Bạn cũng có thể thử xoay trục cụ thể với -webkit-transform: rotateZ(-5deg);.


4
2018-02-22 12:56



không có tôi đã không cố gắng, nhưng nó dường như không có bất kỳ hiệu ứng đáng chú ý nào. cổ vũ mặc dù. - davivid


Tôi gặp sự cố này trên Chrome 33 (Windows 7). Tôi đã thử tất cả các bản sửa lỗi được đề xuất trên trang này. Đau khổ xảy ra sau đó. Vòng xoay của tôi khá đơn giản:

transform: rotate(40deg);
-moz-transform: rotate(40deg);
-webkit-transform: rotate(40deg);

tôi đã tìm thấy điều này và sau một vài thử nghiệm nhanh, tôi thấy rằng kết hợp sau hoạt động hoàn hảo trong Chrome:

-webkit-backface-visibility: hidden;
outline: 1px solid transparent;

Tôi chưa thử nghiệm trình duyệt chéo. Tôi không có ý tưởng mà thêm lỗi này giới thiệu. Bạn đa được cảnh bao. Hy vọng điều này chỉ một người nào đó đi đúng hướng.


Lưu ý phụ: Trong các thử nghiệm của tôi, tôi thấy rằng -webkit-backface-visibility: hidden; (riêng của nó) đã xóa việc khử răng cưa từ các hình ảnh không được chuyển đổi.


3
2018-04-05 13:33



Điều này hoạt động tốt. -webkit-backface-khả năng hiển thị sửa lỗi vấn đề tuy nhiên các pixellation là gây phiền nhiễu. Tôi không chắc chắn cách quy tắc phác thảo sửa chữa pixellation nhưng tôi không quan tâm. Đây là sửa chữa tốt nhất mà tôi đã nhìn thấy cho đến nay. - AJReading


Đây là một Lỗi WebKit đã được sửa và bản sửa lỗi sẽ xuất hiện trong Chrome 15.

Cách giải quyết cho đến khi mọi người cập nhật lên 15+ là đăng ký -webkit-backface-visibility: hidden; cho phần tử được xoay. Đã làm cho tôi. Điều đó kích hoạt tính năng chống răng cưa trên phần tử.


2
2017-09-28 09:48



Điều này làm việc cho tôi, trông giống như khả năng hiển thị backface gây ra sự chống răng cưa Như của Chrome 23 lỗi này không cố định trong Chrome trên Windows 7 - remy
Chrome 33, Windows 7 - vẫn là sự cố ... Vui lòng xem câu trả lời của tôi. - Just Plain High


Bạn có thể thêm hộp bóng cho hình ảnh của bạn với cùng màu như nền của bạn, làm giảm hiệu ứng.

thí dụ: http://antialiasing-webkit.qip.li/edit/


1
2017-07-20 02:29



Đây là giải pháp duy nhất dừng hoàn toàn pixelation khi xoay hình ảnh trong Chrome 47.0.2508.0 (phiên bản xây dựng mới nhất). Các câu trả lời khác được liệt kê ở đây dường như làm cho vấn đề tồi tệ hơn,backface-visibility: hidden làm cho hình ảnh có cạnh pixelated trong khi hoạt ảnh và sau khi hoạt ảnh đã bị dừng. - sixones


Điều này sẽ không phù hợp với mọi cách sử dụng, nhưng bạn có quyền kiểm soát đánh dấu và không ngại thêm một <div> phụ, bạn có thể tận dụng nội dung được tạo để làm sạch đáng kể các cạnh của hình ảnh được xoay trong Chrome. Điều này hoạt động vì Chrome sẽ áp dụng tính năng chống răng cưa cho nội dung được tạo trên hình ảnh.

Bạn có thể xem ví dụ tại đây: http://jsfiddle.net/cherryflavourpez/2SKQW/2/

Hình ảnh đầu tiên không có gì được thực hiện cho nó, thứ hai có một đường viền được áp dụng để phù hợp với màu nền - không phải bất kỳ sự khác biệt nào mà tôi có thể nhìn thấy.

Div hình ảnh thứ ba có một số nội dung được tạo ra với đường viền được đặt xung quanh cạnh. Bạn mất một điểm ảnh xung quanh cạnh, nhưng nó trông tốt hơn nhiều. CSS khá tự giải thích. Điều này có lợi thế là không yêu cầu bạn tạo đường viền trong hình ảnh của bạn, điều này có vẻ như là một mức giá quá lớn đối với tôi.


0
2018-03-30 11:27



Dường như phiên bản Dev mới nhất của Chrome đã bị thoái lui và mẹo này không còn hoạt động nữa. Một số tìm kiếm khác đã đưa ra dòng này: -webkit-transform-style: preserve-3d; Mà dường như làm các trick. - CherryFlavourPez