Css трансформировать, зубчатые края в хроме

Я использую преобразование CSS3 для поворота изображений и текстовых полей с границами на моем веб-сайте.

Проблема заключается в том, что граница выглядит неровной в Chrome, как игра с низким разрешением без Anti-Aliasing. В IE, Opera и FF это выглядит намного лучше, потому что используется AA (который все еще четко виден, но не так уж и плохо). Я не могу проверить Safari, потому что у меня нет Mac.

Повернутая фотография и сам текст выглядят прекрасно, это только граница, которая выглядит зубчатой.

Я использую CSS:

.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 */
}

Есть ли способ исправить это, например. заставляя Chrome использовать AA?

Пример ниже:

Ответ 1

В случае, если кто-либо ищет это позже, хороший трюк, чтобы избавиться от этих неровных краев при преобразованиях CSS в Chrome, заключается в добавлении свойства CSS -webkit-backface-visibility со значением hidden. В моих собственных тестах это полностью сгладило их. Надеюсь, что это поможет.

-webkit-backface-visibility: hidden;

Ответ 2

Если вы используете transition вместо transform, -webkit-backface-visibility: hidden; не работает. Во время анимации появляется прозрачный png файл.

Чтобы решить эту проблему, я использовал: outline: 1px solid transparent;

Ответ 3

Попробуйте 3d-преобразование. Это работает как шарм!

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

Ответ 4

Выбранный ответ (ни один из других ответов) не работал у меня, но это произошло:

img {outline:1px solid transparent;}

Ответ 5

Добавление прозрачной границы 1px вызовет сглаживание

outline: 1px solid transparent;

В качестве альтернативы добавьте 1px box-shadow с цветом заливки.

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

Ответ 6

У меня возникла проблема с градиентом CSS3 с -45deg. background наклонный, был плохо зубчатый, похожий, но хуже, чем исходный пост. Поэтому я начал играть как с background-size. Это растянуло бы зубчатость, но она все еще была там. Затем, кроме того, я читал, что другие люди тоже имеют проблемы с шагом 45 дг, поэтому я настроил от -45deg до -45.0001deg, и моя проблема была решена.

В моем CSS ниже background-size изначально был 30px, а deg для градиента фона был ровно -45deg, и все ключевые кадры были 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;
        }

Ответ 7

Возможно, вы сможете замаскировать зубчатый с помощью размытых box-shadows. Использование -webkit-box-shadow вместо box-shadow гарантирует, что это не повлияет на браузеры, отличные от webkit. Однако вы можете проверить Safari и мобильные веб-браузеры.

Результат несколько лучше, но все же намного хуже, чем с другими браузерами:

Ответ 8

Просто подумал, что мы тоже будем использовать наше решение, поскольку у нас была такая же проблема в Chrome/Windows.

Мы попробовали решение by @stevenWatkins выше, но все еще имели "степпинг".

Вместо

-webkit-backface-visibility: hidden;

Мы использовали:

-webkit-backface-visibility: initial;

Для нас это сделал трюк 🎉

Ответ 9

Добавление следующего для div, окружающего элемент, было исправлено для меня.

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

В моем случае появлялись зубчатые края вокруг окна видео.

Ответ 10

Для меня это была перспектива CSS-свойства, которая сделала трюк:

-webkit-perspective: 1000;

Полностью нелогично в моем случае, поскольку я не использую никаких 3D-переходов, но тем не менее работает.

Ответ 11

Для холста в Chrome (версия 52)

Все перечисленные ответы касаются изображений. Но моя проблема связана с холстом в хром (v.52) с поворотом преобразования. Они стали зубчатыми, и все эти методы не могут помочь.

Решение, которое работает для меня:

Сделать холст большим на 1 px для каждой стороны = > +2 px для ширины и высоты;
Нарисуйте изображение со смещением + 1px (в позиции 1,1 вместо 0,0) и фиксированным размером (размер изображения должен быть на 2 пикселя меньше размера холста)
Применить требуемое вращение

Такие важные блоки кода:

// 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>