преобразование css, зубчатые края в chrome

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



проблема в том, что граница выглядит неровной в Chrome, как игра (с низким разрешением) без сглаживания. В 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?



пример:



Jagged Edges example

894   11  

11 ответов:

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

-webkit-backface-visibility: hidden;
358  
2013-05-09 00:12:30

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

для ее решения я использовал:outline: 1px solid transparent;

103  
2014-11-21 18:11:51

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

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

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

outline: 1px solid transparent;

кроме того, добавьте прозрачную коробку-тень 1px.

box-shadow: 0 0 1px rgba(255,255,255,0);
15  
2018-08-24 14:05:58

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

img {outline:1px solid transparent;}

7  
2015-08-06 09:02:03

у меня была проблема с градиентом CSS3 с-45deg. Элемент background наклонный, был сильно зазубрен, похожий, но хуже, чем исходный пост. Поэтому я начал играть с обоими background-size. Это растянуло бы неровность, но она все еще была там. Затем, кроме того, я прочитал, что у других людей тоже возникают проблемы с шагом 45deg, поэтому я скорректировал от -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;
        }
2  
2016-08-11 01:05:11

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

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

with box shadow (underside)

1  
2014-10-09 12:38:26

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

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

вместо

-webkit-backface-visibility: hidden;

мы: 

-webkit-backface-visibility: initial;

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

1  
2017-08-17 14:29:19

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

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

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

1  
2017-09-20 01:23:55

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

-webkit-perspective: 1000;

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

0  
2014-03-10 17:41:00

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

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

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

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

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

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

пример: https://jsfiddle.net/tLbxgusx/1/

Примечание: есть много вложенных дивов, потому что это упрощенная версия моего проекта.

этот вопрос воспроизводится также для Firefox для меня. Нет такого выпуск на Safari и FF с retina.

и другое основано решение это поместить холст в div того же размера и применить следующий css к этому div:

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

и вращение должно быть приложено к этому оборачивая div. Таким образом, указанное решение работает, но с небольшой модификацией.

и модифицированный пример для такого решения:https://jsfiddle.net/tLbxgusx/2/

Примечание: см. Стиль div с классом - третий.

0  
2016-08-26 12:28:13

Comments

    Ничего не найдено.
Click here to cancel reply.