Появляется Chrome Font Blurry

Ответ 1

Я исправил эту проблему, вычитая 0.5px из значения оси Y. Таким образом вместо:

transform: translateX(-50%) translateY(-50%);

Я сделал это:

transform: translateX(-50%) translateY(calc(-50% - .5px));

Это разрешило это для меня, и я нахожу это более чистым решением, а затем упражняюсь в процентах или используя Javascript.

Ответ 2

Я испытал ту же проблему на хроме после применения преобразования translate к одному из моих элементов. Кажется, это ошибка на хроме. Единственное, что сработало для меня, это:

#the_element_that_you_applied_translate_to {
  -webkit-filter: blur(0.000001px);
}

Другое решение может превращать рендеринг гладких шрифтов:

#the_element_that_you_applied_translate_to {
  -webkit-font-smoothing: antialiased;
}

Ответ 3

Эта скрипка проверяет несколько разных решений:

• Эффект перехода CSS делает изображение размытым/перемещает изображение 1px, в Chrome?
• WebKit: размытый текст с помощью css scale + translate3d
• http://www.useragentman.com/blog/2014/05/04/fixing-typography-inside-of-2-d-css-transforms/

Выход теста

Исправить 0

-webkit-transform: translateZ(0);
transform: translateZ(0);

Исправить 3

-webkit-transform: translate3d(0,0,0) !important;
transform: translate3d(0,0,0) !important;

Ответ 4

Единственный правильный способ решить эту проблему:

Эта проблема возникает из-за использования значений% для выравнивания элементов div с использованием преобразований CSS. Это приводит к субпиксельным значениям в десятичном формате, которые ваш экран не может правильно отобразить. Решение состоит в том, чтобы нормализовать полученную матрицу преобразования.

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

Итак: матрица (1,0,0,1, -375, -451.5) станет матрицей (1,0,0,1, -375, -451)

Я вызываю этот метод перед.show() jquery... Или, может быть, только один раз в приложении (зависит от вашего случая), вам также может понадобиться вызвать его для события resize и т.д.

function roundCssTransformMatrix(element){
        var el = document.getElementById(element);
        el.style.transform=""; //resets the redifined matrix to allow recalculation, the original style should be defined in the class not inline.
        var mx = window.getComputedStyle(el, null); //gets the current computed style
        mx = mx.getPropertyValue("-webkit-transform") ||
             mx.getPropertyValue("-moz-transform") ||
             mx.getPropertyValue("-ms-transform") ||
             mx.getPropertyValue("-o-transform") ||
             mx.getPropertyValue("transform") || false;
        var values = mx.replace(/ |\(|\)|matrix/g,"").split(",");
        for(var v in values) { values[v]=v>4?Math.ceil(values[v]):values[v]; }

        $("#"+element).css({transform:"matrix("+values.join()+")"});

}

и назовите это

roundCssTransformMatrix("MyElementDivId");
$("#MyElementDivId").show();

Красиво, не правда ли?

Если вам нужно обновить размер, вы можете сделать это с:

$( window ).resize(function() {
  roundCssTransformMatrix("MyElementDivId");  
});

Чтобы это работало, все родительские элементы должны быть "выровнены/нормализованы", потому что если у вас, к примеру, осталось тело с x = 10.1px слева, а дочерний - 10px.. проблема не исчезнет, потому что у родителя есть остаточные десятичные дроби матрица Таким образом, вы должны применить эту функцию к каждому элементу, который является родительским и использует преобразование.

Вы можете увидеть этот живой скрипт здесь: https://jsbin.com/fobana/edit?html,css,js,output

Ответ 5

Спасибо за пример CSS. Кажется, что translateX(50%) и translateY(50%) вычисляют значение пикселя с десятичной точкой (например, 0.5px), которая вызывает субпиксельную визуализацию.

Есть много исправлений для этого, но если вы хотите сохранить качество текста, лучшим решением будет использовать -webkit-font-smoothing: subpixel-antialiased; на .md-modal, чтобы заставить состояние отображения для браузеров веб-китов, таких как Chrome и Safari.

Ответ 6

Я закончил это исправлением, удалив эти строки:

-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
backface-visibility: hidden;

Ответ 7

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

Проблема для меня заключалась в том, что у ребенка div были свойства width и height с комбинацией, которая вызвала проблему.

Как я изменил height для другого значения, он просто сработает!

Это, вероятно, связано с другими ответами, но я не хотел использовать JS или изменять свойство transform, чтобы исправить его.

Вот живой пример: JSFIDDLE

Ответ 8

Для модальных полей этот css поможет:

-webkit-transform: translate3d(-50%, -51%, 0);
-moz-transform: translate3d(-50%, -51%, 0);
transform: translate3d(-50%, -51%, 0);

Вместо того, чтобы поместить ось Y на 50%, сделайте ее 51%. Это помогает в моем cse. Если у вас другое расположение, поиграйте, но обычно 1% вверх/вниз фиксирует размытое содержимое.

Ответ 9

Если вы хотите что-то отцентрировать, лучше используйте flexbox. Это поможет вам позиционировать текст без размытия.

Добавьте это в родительский div того элемента, который вы хотите центрировать:

display: flex;
justify-content: center;
align-items: center;

Надеюсь, это поможет.

Ответ 10

Добавление перехода CSS к родительскому элементу родительского элемента моего размытого элемента (который использовал transformX, который вызывал размытость) фактически отменил оскорбительную размытость.

Ответ 11

Подобная проблема произошла для меня.

Я пытался всеми предлагаемыми методами ни один не работал нормально. Однако, наконец, я решил это. Так как есть проблема с Google Chrome, имеющим font-weight:600 или больше. Попробуйте изменить семейство шрифтов на семейство font-family:"Webly Sleek SemiBold","Helvetica";

Свойство font-weight будет работать нормально.

Ответ 12

Другая причина может заключаться в том, что вы не предоставляете необходимый вес шрифта, который вы используете.

Например, если вы хотите использовать как Лато, так и Робото, вы хотите включить больше, чем просто стандартный вес. Этот пример применяется, если вы используете Google Font API:

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lato:400,900|Roboto:500,700">

Примечание: Lato доступен с шрифтами 100, 300, 400, 700 и 900, но мне пришлось указать 900, чтобы текст 700 стал четким... не знаю почему.

Ответ 13

На данный момент я нашел только одно хорошее решение:

transform: translate(-50%, -50.1%)

0,1% - обычно пользователь не может видеть это

Надеюсь, что хром исправит это - ошибка существует с 2014 года))))

Ответ 14

Если вы не хотите реализовывать какие-либо специальные js или нестандартные решения, и единственное, чего вы хотите добиться, это центрировать ваш div, а ширина и высота не имеют фиксированного размера, вы можете просто использовать это:

position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;

Если один из размеров является фиксированным, вы можете попробовать этот подход:

position: absolute;
left: 50%;
translate: transformX(-50%);
top: 0;
bottom: 0;
margin: auto;

Это исправляет проблему с размытым шрифтом в Chrome.