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

Question

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

Это делает мои глаза в!

отлично выглядит в IE и Firefox

Хром (Выше)

Запуск версии 39 Chrome, только выглядит размытым в модальном окне, не имеет никакого значения, если я изменю семейство шрифтов.

Это CSS (для ярлыка "Пуск") браузер отображает следующее

box-sizing: border-box;
color: rgb(85, 85, 85);
cursor: default;
display: block;
float: left;
font-family: sans-serif;
font-size: 12px;
font-weight: 600;
height: 24px;
line-height: 17.142858505249px;
margin-bottom: 0px;
margin-top: 0px;
min-height: 1px;
padding-left: 15px;
padding-right: 15px;
padding-top: 7px;
position: relative;
text-align: right;
visibility: visible;
width: 89.65625px;

Это браузер или CSS?

--ОБНОВИТЬ---

Хорошо выглядит как этот CSS

.md-modal {
    position: fixed;
    top: 50%;
    left: 50%;
    width: 50%;
    max-width: 630px;
    min-width: 320px;
    height: auto !important;
    z-index: 2000;
    visibility: hidden;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transform: translateX(-50%) translateY(-50%); <--- This line
    -moz-transform: translateX(-50%) translateY(-50%);
    -ms-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
}

Однако, если я возьму это, мой модал больше не центрируется?

66

css google-chrome

Источник

user1401620 09 дек '14 в 17:31

25 ответов

Другие вопросы по тегам css google-chrome

user7663166 05 мар '17 в 20:44 2017-03-05 20:44 · Answer 1 · 2017-03-05 20:44

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

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

Я сделал это:

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

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

user1116503 12 мар '16 в 07:40 2016-03-12 07:40 · Answer 2 · 2016-03-12 07:40

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

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

Другим решением может быть включение плавного рендеринга шрифтов:

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

user1085891 13 дек '14 в 23:01 2014-12-13 23:01 · Answer 3 · 2014-12-13 23:01

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

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

Тестовый вывод

CSS-вывод

Исправить 0

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

Исправить 3

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

user1834212 15 фев '17 в 18:03 2017-02-15 18:03 · Answer 4 · 2017-02-15 18:03

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

Эта проблема возникает из-за использования значений% для выравнивания элементов 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

user1200549 11 дек '14 в 10:46 2014-12-11 10:46 · Answer 5 · 2014-12-11 10:46

Спасибо за пример CSS. Похоже на то translateX(50%) а также translateY(50%) вычисляют значение пикселя с десятичным знаком (например, 0,5 пикселя), что вызывает субпиксельный рендеринг.

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

user2175024 10 авг '17 в 20:19 2017-08-10 20:19 · Answer 6 · 2017-08-10 20:19

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

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

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

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

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

user704015 28 авг '16 в 09:43 2016-08-28 09:43 · Answer 7 · 2016-08-28 09:43

Я решил исправить это, удалив эти строки:

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

5

Источник

user704015 28 авг '16 в 09:43

user8250754 09 окт '19 в 11:34 2019-10-09 11:34 · Answer 8 · 2019-10-09 11:34

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

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

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

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

3

Источник

user8250754 09 окт '19 в 11:34

user3447218 11 ноя '19 в 20:08 2019-11-11 20:08 · Answer 9 · 2019-11-11 20:08

Кажется, в Chrome 78 все еще есть эта ошибка https://bugs.chromium.org/p/chromium/issues/detail?id=521364.

Основываясь на предыдущих ответах, я обнаружил, что приведенный ниже CSS дал мне наиболее четкое отображение переведенного модального окна:

transform: translate(calc(-50% - .4px), calc(-50% - .4px));

РЕДАКТИРОВАТЬ: Для совместимости с IE11:

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

user1132338 05 фев '16 в 15:12 2016-02-05 15:12 · Answer 10 · 2016-02-05 15:12

Для модальных ящиков этот CSS поможет:

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

Вместо размещения оси Y на 50%, сделайте это 51%. Это помогает в моей CSE. Если у вас другое позиционирование, поиграйте, но обычно 1% вверх / вниз исправляет размытый контент.

user759673 08 дек '18 в 01:56 2018-12-08 01:56 · Answer 11 · 2018-12-08 01:56

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

Например, если вы хотите использовать как Лато, так и Робото, вы хотите включить больше, чем просто стандартный вес. Этот пример применяется, если вы используете 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 стал четким... не знаю почему.

user6527601 14 ноя '19 в 13:43 2019-11-14 13:43 · Answer 12 · 2019-11-14 13:43

Вы можете решить эту проблему, поставив:

    transform: inherit;

1

Источник

user6527601 14 ноя '19 в 13:43

user7780758 12 окт '20 в 18:18 2020-10-12 18:18 · Answer 13 · 2020-10-12 18:18

Вы должны выбрать шрифт с соответствующей толщиной шрифта, если вам нужен тонкий, обычный и жирный текст. Выбирайте шрифт толщиной 100 | 400 | Пример 700: как показано ниже

Толщина шрифта - это не только число. Файл должен быть доступен на сервере или в каталоге. Каждый вес шрифта - отдельный файл.

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

@importurl('https://fonts.googleapis.com/css2?family=Roboto:wght@100;400;700&display=swap');

user12723292 05 фев '20 в 12:58 2020-02-05 12:58 · Answer 14 · 2020-02-05 12:58

TL; DR

Я столкнулся с этой проблемой несколько дней назад. Я чуть не сошел с ума, пытаясь повысить резкость шрифтов в Chrome. Я прочитал все сообщения в этой теме и во всех других сообщениях, касающихся повышения резкости шрифтов в Chrome. Даже сообщение "Единственно правильный способ решить эту проблему" в моем случае не помогло. Что помогло?

Стоит отметить, что проблема возникла в следующем div:

position: sticky;
left: 16%;

А атрибут "липкость" оказался самой большой проблемой. Для липких элементов мы устанавливаем позицию как для "абсолютных" элементов - используя атрибуты "left", "top" и т. Д. И вот проблема: с нецелыми значениями "left" шрифт выглядит резко размытым, с целыми числами - намного лучше.

Каково решение?

position: sticky;    
left: 0;
margin-left: 16%;

И это все. Chrome обработает процентную "маржу", и шрифты будут выглядеть резкими.

user13513640 20 авг '22 в 10:32 2022-08-20 10:32 · Answer 15 · 2022-08-20 10:32

Я знаю, что это старая проблема, но, поскольку я наткнулся на нее в 2022 году, я подумал, что просто расскажу кому-то, кому это нужно, как я решил ее в своей ситуации:

У меня было модальное окно с текстовым полем, а в Chrome оно отображалось размыто, но только тогда, когда текстовое поле переполнялось. Мой модальный - НЕ сама текстовая область - имелoverflow: hidden;поэтому я просто удалил это.

user4473820 16 сен '16 в 12:06 2016-09-16 12:06 · Answer 16 · 2016-09-16 12:06

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

0

Источник

user4473820 16 сен '16 в 12:06

user8217508 12 фев '20 в 00:01 2020-02-12 00:01 · Answer 17 · 2020-02-12 00:01

Для тех, кто все еще пытается найти решение, установка фона по какой-то причине исправила это для меня.

background: #fff;

0

Источник

user8217508 12 фев '20 в 00:01

user380240 09 мар '20 в 18:15 2020-03-09 18:15 · Answer 18 · 2020-03-09 18:15

Я обнаружил, что применяя translate3d(0, 0, 0) исправить, поскольку предложенный JSuar работал в Chrome, но не в Safari.

Единственное, что работало во всех браузерах, - это дать элементу, который я центрировал (используя transform: translate(50%, -50%)) равная ширина в пикселях - изменение ширины с 425 пикселей на 426 пикселей снова сделало текст резким.

user7462492 29 авг '19 в 20:07 2019-08-29 20:07 · Answer 19 · 2019-08-29 20:07

Если вы не хотите реализовывать какие-либо специальные 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.

user10479611 13 ноя '18 в 14:57 2018-11-13 14:57 · Answer 20 · 2018-11-13 14:57

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

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

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

Blur_Font

Without_Blur

user1749141 19 янв '20 в 16:17 2020-01-19 16:17 · Answer 21 · 2020-01-19 16:17

Лучший способ решить эту проблему, которая, по-видимому, возникает только в Chrome и только на определенных размерах экрана, - это заменить все определения transform:translate(-50%,50%) альтернативными решениями. Использование любого другого решения может решить эту проблему на вашем экране, но не на другом.

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

#cntr{position:fixed;left:50%;bottom:0;width:100%;max-width:1800px;transform:translateX(-50%);-ms-transform:translateX(-50%);-webkit-transform:translateX(-50%);-moz-transform:translateX(-50%);-o-transform:translateX(-50%);text-align:center;}

Там много определений для всех браузеров. Изменено на это, чтобы решить эту проблему:

#cntr{position:fixed;left:0;right:0;margin:auto;bottom:0;width:100%;max-width:1800px;text-align:center;}

Намного меньше кода, чище, быстрее и работает на 100%, без необходимости редактировать HTML.

Определения, которые теперь центрируют фиксированную позицию div: left:0;right:0;margin:auto;

Не требуется переводить, не помещать десятичную точку div.

user8819012 17 сен '20 в 04:23 2020-09-17 04:23 · Answer 22 · 2020-09-17 04:23

Проблема часто возникает с position: fixed; и transform: translate(...) когда ширина и высота элемента не являются круглым четным числом.

Одно из решений - округлить числа программным способом. Пример:

function roundToEven(x) {
  const rounded = Math.round(x)
  return rounded % 2 ? rounded + 1 : rounded
}
const element = document.getElementById('element-id')
const rect = element.getBoundingClientRect()
element.style.width = roundToEven(rect.width) + 'px'
element.style.height = roundToEven(rect.height) + 'px'

user3149711 05 май '22 в 22:38 2022-05-05 22:38 · Answer 23 · 2022-05-05 22:38

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

      https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap

против

      https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap

user2746447 15 май '19 в 09:22 2019-05-15 09:22 · Answer 24 · 2019-05-15 09:22

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

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

0.1% - вообще пользователь не может видеть это

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

0

Источник

user2746447 15 май '19 в 09:22

user13260339 09 май '20 в 16:40 2020-05-09 16:40 · Answer 25 · 2020-05-09 16:40

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

Проблема возникает из-за0.5pxразница.
Простое решение - изменить свойство top с50% к calc(50% - .5px)

-1

Источник

user13260339 09 май '20 в 16:40