biến đổi css, các cạnh lởm chởm trong chrome

Tôi đã sử dụng biến đổi CSS3 để xoay hình ảnh và hộp văn bản có viền trong trang web của mình.

Vấn đề là đường viền trông lởm chởm trong Chrome, giống như một trò chơi (độ phân giải thấp) mà không có khử răng cưa. Trong IE, Opera và FF có vẻ tốt hơn nhiều vì được sử dụng AA (vẫn rõ ràng nhưng không tệ lắm). Tôi không thể kiểm tra Safari vì tôi không sở hữu máy Mac.

Các bức ảnh xoay và văn bản chính nó trông ổn, nó chỉ là đường viền trông lởm chởm.

CSS tôi sử dụng là đây:

.rotate2deg {
    transform: rotate(2deg);
    -ms-transform: rotate(2deg); /* IE 9 */
    -webkit-transform: rotate(2deg); /* Safari and Chrome */
    -o-transform: rotate(2deg); /* Opera */
    -moz-transform: rotate(2deg); /* Firefox */
}

Có cách nào tôi có thể khắc phục điều này không, ví dụ như bằng cách buộc Chrome sử dụng AA?

Ví dụ dưới đây:

Trong trường hợp bất cứ ai tìm kiếm điều này sau này, một mẹo hay để loại bỏ 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-visibilityvới giá trị là 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 ra. Mong rằng sẽ giúp.

-webkit-backface-visibility: hidden;

Nếu bạn đang sử dụng transitionthay vì transform, -webkit-backface-visibility: hidden;không hoạt động. Một cạnh lởm chởm xuất hiện trong khi hoạt hình cho một tệp png trong suốt.

Để giải quyết nó tôi đã sử dụng: outline: 1px solid transparent;

Thêm viền trong suốt 1px sẽ kích hoạt khử răng cưa

outline: 1px solid transparent;

Ngoài ra, thêm bóng hộp trong suốt 1px.

box-shadow: 0 0 1px rgba(255,255,255,0);

Hãy thử chuyển đổi 3d. Công việc này như một cái duyên vậy!

/* Due to a bug in the anti-liasing*/
-webkit-transform-style: preserve-3d; 
-webkit-transform: rotateZ(2deg);

Câu trả lời được chọn (cũng không phải câu trả lời nào khác) không phù hợp với tôi, nhưng điều này đã làm:

img {outline:1px solid transparent;}

Tôi đã gặp sự cố với gradient CSS3 với -45deg. Các backgroundxiên, bị lởm chởm tương tự nhưng tệ hơn bài gốc. Vì vậy, tôi bắt đầu chơi với cả hai background-size. Điều này sẽ kéo dài sự lởm chởm, nhưng nó vẫn còn đó. Sau đó, tôi cũng đọc được rằng những người khác cũng gặp vấn đề với mức tăng 45deg nên tôi đã điều chỉnh từ -45degsang-45.0001deg và vấn đề của tôi đã được giải quyết.

Trong CSS của tôi dưới đây, background-sizeban đầu 30pxvà degđộ dốc nền là chính xác -45deg, và tất cả các khung hình chính là 30px 0.

    @-webkit-keyframes progressStripeLTR {
        to {
            background-position: 60px 0;
        };
    }

    @-moz-keyframes progressStripeLTR {
        to {
            background-position: 60px 0;
        };
    }

    @-ms-keyframes progressStripeLTR {
        to {
            background-position: 60px 0;
        };
    }

    @-o-keyframes progressStripeLTR {
        to {
            background-position: 60px 0;
        };
    }

    @keyframes progressStripeLTR {
        to {
            background-position: 60px 0;
        };
    }

    @-webkit-keyframes progressStripeRTL {
        to {
            background-position: -60px 0;
        };
    }

    @-moz-keyframes progressStripeRTL {
        to {
            background-position: -60px 0;
        };
    }

    @-ms-keyframes progressStripeRTL {
        to {
            background-position: -60px 0;
        };
    }

    @-o-keyframes progressStripeRTL {
        to {
            background-position: -60px 0;
        };
    }

    @keyframes progressStripeRTL {
        to {
            background-position: -60px 0;
        };
    }

    .pro-bar-candy {
        width: 100%;
        height: 15px;

        -webkit-border-radius:  3px;
        -moz-border-radius:     3px;
        border-radius:          3px;

        background: rgb(187, 187, 187);
        background: -moz-linear-gradient(
                        -45.0001deg,
                        rgba(187, 187, 187, 1.00) 25%,
                        transparent 25%,
                        transparent 50%,
                        rgba(187, 187, 187, 1.00) 50%,
                        rgba(187, 187, 187, 1.00) 75%,
                        transparent 75%,
                        transparent
                    );
        background: -webkit-linear-gradient(
                        -45.0001deg,
                        rgba(187, 187, 187, 1.00) 25%,
                        transparent 25%,
                        transparent 50%,
                        rgba(187, 187, 187, 1.00) 50%,
                        rgba(187, 187, 187, 1.00) 75%,
                        transparent 75%,
                        transparent
                    );
        background: -o-linear-gradient(
                        -45.0001deg,
                        rgba(187, 187, 187, 1.00) 25%,
                        transparent 25%,
                        transparent 50%,
                        rgba(187, 187, 187, 1.00) 50%,
                        rgba(187, 187, 187, 1.00) 75%,
                        transparent 75%,
                        transparent
                    );
        background: -ms-linear-gradient(
                        -45.0001deg,
                        rgba(187, 187, 187, 1.00) 25%,
                        transparent 25%,
                        transparent 50%,
                        rgba(187, 187, 187, 1.00) 50%,
                        rgba(187, 187, 187, 1.00) 75%,
                        transparent 75%,
                        transparent
                    );
        background: linear-gradient(
                        -45.0001deg,
                        rgba(187, 187, 187, 1.00) 25%,
                        transparent 25%,
                        transparent 50%,
                        rgba(187, 187, 187, 1.00) 50%,
                        rgba(187, 187, 187, 1.00) 75%,
                        transparent 75%,
                        transparent
                    );
        background: -webkit-gradient(
                        linear,
                        right bottom,
                        right top,
                        color-stop(
                            25%,
                            rgba(187, 187, 187, 1.00)
                        ),
                        color-stop(
                            25%,
                            rgba(0, 0, 0, 0.00)
                        ),
                        color-stop(
                            50%,
                            rgba(0, 0, 0, 0.00)
                        ),
                        color-stop(
                            50%,
                            rgba(187, 187, 187, 1.00)
                        ),
                        color-stop(
                            75%,
                            rgba(187, 187, 187, 1.00)
                        ),
                        color-stop(
                            75%,
                            rgba(0, 0, 0, 0.00)
                        ),
                        color-stop(
                            rgba(0, 0, 0, 0.00)
                        )
                    );

        background-repeat: repeat-x;
        -webkit-background-size:    60px 60px;
        -moz-background-size:       60px 60px;
        -o-background-size:         60px 60px;
        background-size:            60px 60px;
        }

    .pro-bar-candy.candy-ltr {
        -webkit-animation:  progressStripeLTR .6s linear infinite;
        -moz-animation:     progressStripeLTR .6s linear infinite;
        -ms-animation:      progressStripeLTR .6s linear infinite;
        -o-animation:       progressStripeLTR .6s linear infinite;
        animation:          progressStripeLTR .6s linear infinite;
        }

    .pro-bar-candy.candy-rtl {
        -webkit-animation:  progressStripeRTL .6s linear infinite;
        -moz-animation:     progressStripeRTL .6s linear infinite;
        -ms-animation:      progressStripeRTL .6s linear infinite;
        -o-animation:       progressStripeRTL .6s linear infinite;
        animation:          progressStripeRTL .6s linear infinite;
        }

Bạn có thể che dấu răng cưa bằng cách sử dụng bóng hộp mờ . Sử dụng -webkit-box-Shadow thay vì box-Shadow sẽ đảm bảo nó không ảnh hưởng đến các trình duyệt không phải webkit. Bạn có thể muốn kiểm tra Safari và các trình duyệt webkit di động.

Kết quả có phần tốt hơn, nhưng vẫn kém hơn rất nhiều so với các trình duyệt khác:

Chỉ cần nghĩ rằng chúng tôi cũng sẽ đưa ra giải pháp của mình vì chúng tôi có cùng một vấn đề chính xác trên Chrome / Windows.

Chúng tôi đã thử giải pháp bằng cách @stevenWatkins ở trên, nhưng vẫn có "bước".

Thay vì

-webkit-backface-visibility: hidden;

Chúng tôi đã sử dụng:

-webkit-backface-visibility: initial;

Đối với chúng tôi, đây là một mẹo nhỏ

Thêm phần sau vào div xung quanh phần tử trong câu hỏi đã sửa lỗi này cho tôi.

-webkit-transform-style: preserve-3d;

Các cạnh lởm chởm đã xuất hiện xung quanh cửa sổ video trong trường hợp của tôi.

Đối với tôi, đó là thuộc tính CSS phối cảnh đã thực hiện thủ thuật:

-webkit-perspective: 1000;

Hoàn toàn phi logic trong trường hợp của tôi vì tôi không sử dụng chuyển tiếp 3d, nhưng dù sao cũng hoạt động.

Dành cho canvas trong Chrome (Phiên bản 52)

Tất cả các câu trả lời được liệt kê là về hình ảnh. Nhưng vấn đề của tôi là về canvas trong chrome (v.52) với biến đổi xoay. Họ trở nên lởm chởm và tất cả các phương pháp này không thể giúp được.

Giải pháp hiệu quả với tôi:

1. Làm cho khung vẽ lớn hơn trên 1 px cho mỗi bên => +2 px cho chiều rộng và chiều cao;
2. Vẽ hình ảnh với offset + 1px (ở vị trí 1,1 thay vì 0,0) và kích thước cố định (kích thước của hình ảnh phải nhỏ hơn 2px so với kích thước của khung vẽ)
3. Áp dụng xoay yêu cầu

Vì vậy, các khối mã quan trọng:

// Unfixed version
ctx.drawImage(img, 0, 0, 335, 218);
// Fixed version
ctx.drawImage(img, 1, 1, 335, 218);

/* This style should be applied for fixed version */
canvas {
  margin-left: -1px;
  margin-top:-1px;
}        

<!--Unfixed version-->
<canvas width="335" height="218"></canvas>
<!--Fixed version-->
<canvas width="337" height="220"></canvas>

Mẫu: https://jsfiddle.net/tLbxgusx/1/

Lưu ý: có rất nhiều div lồng nhau vì đây là phiên bản đơn giản hóa từ dự án của tôi.

Vấn đề này cũng được sao chép cho Firefox đối với tôi. Không có vấn đề như vậy trên Safari và FF với võng mạc.

Và giải pháp thành lập khác là đặt canvas vào div có cùng kích thước và áp dụng css sau cho div này:

overflow: hidden;
box-shadow: 0 0 1px rgba(255,255,255,0);
// Or
//outline:1px solid transparent;

Và xoay nên được áp dụng cho div gói này. Vì vậy, giải pháp được liệt kê là làm việc nhưng với sửa đổi nhỏ.

Và ví dụ sửa đổi cho giải pháp đó là: https://jsfiddle.net/tLbxgusx/2/

Lưu ý: Xem kiểu div với lớp 'thứ ba'.