Розмитий текст після використання перетворення CSS: scale (); в Chrome

Схоже, нещодавно оновлено Google Chrome, яке викликає розмиття тексту після виконання transform: scale(). Конкретно я роблю це:

@-webkit-keyframes bounceIn {
  0% {
    opacity: 0;
    -webkit-transform: scale(.3);
  }

  50% {
    opacity: 1;
    -webkit-transform: scale(1.05);
  }

  70% {
    -webkit-transform: scale(.9);
  }

  100% {
    -webkit-transform: scale(1);
  }
}

Якщо ви відвідаєте http://rourkery.com в Chrome, ви повинні побачити проблему в основній області тексту. Це раніше не робилося, і, схоже, це не впливає на інші веб-браузери (наприклад, Safari). Були ще деякі публікації про людей, які стикаються з подібною проблемою із 3D-перетвореннями, але нічого про подібні перетворення 2d не можна знайти.

Будь-які ідеї будуть вдячні, дякую!

У мене виникала ця проблема кілька разів, і, здається, є два способи її усунення (показано нижче). Ви можете використовувати будь-який з цих властивостей, щоб виправити візуалізацію, або обидва одночасно.

Прихована видимість задньої поверхні виправляє проблему, оскільки вона спрощує анімацію лише передньою частиною об'єкта, тоді як за замовчуванням - це передня та задня частина.

backface-visibility: hidden;

TranslateZ також працює, оскільки це хак додати апаратне прискорення до анімації.

transform: translateZ(0);

Обидва ці властивості вирішують проблему, яка виникає у вас, але деякі люди також хочуть додати

-webkit-font-smoothing: subpixel-antialiased;

їх анімовані на заперечення. Я вважаю, що це може змінити візуалізацію веб-шрифту, але сміливо експериментуйте і з цим методом.

Для поліпшення розмитості, особливо у Chrome спробуйте зробити це:

transform: perspective(1px) translateZ(0);
backface-visibility: hidden;

ОНОВЛЕННЯ: Перспектива додає відстань між користувачем і площиною z, яка технічно масштабує об'єкт, завдяки чому розмитість здається «постійною». Вище perspective(1px)сказане як качка-стрічка, оскільки ми відповідаємо розмитості, яку ми намагаємося вирішити. Можливо, вам пощастить із css нижче:

transform: translateZ(0);
backface-visibility: hidden;

Я виявив, що коригування співвідношення масштабу трохи допомогло.

Використання scale(1.048)Over, (1.05)здавалося, генерує краще наближення до розміру шрифту в цілому пікселі, зменшуючи розмиття субпікселя.

Я також використовував, translateZ(0)який, здається, коригував останній крок округлення Chrome в анімації перетворення. Це плюс для мого використання на судно, оскільки це збільшує швидкість і зменшує візуальний шум. Для функції onclick я би не використовував її, оскільки трансформований шрифт не виглядає настільки хрустким.

Перепробувавши все інше тут не пощастило, то , що , нарешті , фіксований це питання для мене було видалення в will-change: transform;власність. Чомусь це спричинило жахливе розмиття на вигляд масштабування в Chrome, але не в Firefox.

Замість

transform: scale(1.5);

використовуючи

zoom : 150%;

виправляє проблему розмивання тексту в Chrome.

Це має бути помилка з Chrome (версія 56.0.2924.87), але наведене нижче виправляє розмитість для мене при зміні властивостей css в консолі ('. 0'). Я повідомлю про це.

filter: blur(.0px)

Сундери ведуть мене до відповіді. За винятком filter: scaleне існує, але є filter: blur.

Застосуйте наступні декларації до елементів, які здаються розмитими (у моєму випадку вони були всередині трансформованого елемента):

backface-visibility: hidden;    
-webkit-filter: blur(0);

Це майже справно працювало. " Майже ", тому що я використовую перехід, і перебуваючи в переході, елементи не виглядають ідеально, але як тільки перехід зроблений, вони роблять.

Я з'ясував, що проблема виникає на відносних перетвореннях будь-яким способом. translateX (50%), масштаб (1.1) або що завгодно. забезпечення абсолютних значень завжди працює (не створює розмитого тексту (ур)).

Жодне із згаданих рішень тут не працювало, і я думаю, що рішення ще не існує (використовуючи Chrome 62.0.3202.94, поки я це пишу).

У моєму випадку transform: translateY(-50%) translateX(-50%) спричиняє розмиття (я хочу відцентрувати діалогове вікно).

Щоб досягти трохи більше "абсолютних" значень, мені довелося встановити десяткові значення transform: translateY(-50.09%) translateX(-50.09%) .

ПРИМІТКА

Я впевнений, що ці значення залежать від різних розмірів екрана. Я просто хотів поділитися своїм досвідом, якщо це комусь допомагає.

Я знайшов набагато краще та чистіше рішення:

.element{
 transform:scale(0.5) 
 transform-origin: 100% 0;
}

або

.element{
 transform:scale(0.5) 
 transform-origin: 0% 0;
}

Завдяки цій публікації: Запобігання розмитому візуалізації з перетворенням: масштаб

Додавання perspective(1px)працювало для мене.

transform: scale(1.005);

до

transform: scale(1.005) perspective(1px);

Спробуйте використовувати zoom: 101%;для складних конструкцій, коли ви не можете використовувати комбінацію масштабу + масштабу.

У моєму випадку наступний код викликав розмитий шрифт:

-webkit-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);

і лише додавання властивості масштабування виправило це для мене. Пограйте зі збільшенням, працюючи на мене:

zoom: 97%;   

Ще одне виправлення, яке я спробував щойно знайти для розмитих перетворень (translate3d, scaleX) на Chrome, - це встановити елемент як " display: inline-table ;". Здається, у певному випадку (на осі X) вимушене округлення пікселів.

Я читав, що призначене розташування субпікселів під Chrome було призначене, і розробники цього не виправлять.

Оновлення 2019 року
року Помилка відображення Chrome все ще не виправлена, і, хоча не винні меценати, жодна з пропозицій, запропонованих у цілому на цьому веб-сайті, не допомагає вирішити проблему. Я можу погодитися, що я пробував кожне з них даремно: лише 1 підходить, і це правило css: filter: blur (0); що виключає зсув контейнера на 1px, але не усуває помилку відображення самого контейнера та будь-якого вмісту, який він може мати.

Ось реальність: у цій буквально немає виправлення цієї проблеми, тому тут є розробка веб-сайтів

СЛУЧАЙ
В даний час я розробляю веб-сайт із флюїдом і маю 3 діви, усі в центрі яких мають ефект наведення курсору та обмін значеннями відсотків як по ширині, так і по позиції. Помилка Chrome виникає на центральному контейнері, який встановлено ліворуч: 50%; та перетворити: translateX (-50%); загальна обстановка.

ПРИКЛАД: Спочатку HTML ...

<div id="box1" class="box">
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry"s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
</div>

<div id="box2" class="box">
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry"s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
</div>

<div id="box3" class="box">
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry"s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
</div>

Ось CSS, де відбувається помилка Chrome ...

*{margin:0; padding:0; border:0; outline:0; box-sizing:border-box;  background:#505050;}
.box {position:absolute; border:1px solid #fff; border-radius:10px; width:26%; background:#8e1515; padding:25px; top:20px; font-size:12pt; color:#fff; overflow:hidden; text-align:center; transition:0.5s ease-in-out;}
.box:hover {background:#191616;}
.box:active {background:#191616;}
.box:focus {background:#191616;}
#box1 {left:5%;}
#box2 {left:50%; transform:translateX(-50%);} /* Bugged */
#box3 {right:5%;}

Ось фіксований css ...

*{margin:0; padding:0; border:0; outline:0; box-sizing:border-box;  background:#505050;}
.box {position:absolute; border:1px solid #fff; border-radius:10px; width:26%; background:#8e1515; padding:25px; top:20px; font-size:12pt; color:#fff; overflow:hidden; text-align:center; transition:0.5s ease-in-out;}
.box:hover {background:#191616;}
.box:active {background:#191616;}
.box:focus {background:#191616;}
#box1 {left:5%;}
#box2 {left:37%;} /* Fixed */
#box3 {right:5%;}

Bugged скрипка: https://jsfiddle.net/m9bgrunx/2/
Fixed скрипка: https://jsfiddle.net/uoc6e2dm/2/

Як ви бачите, невелика кількість підключень до CSS має зменшити або усунути вимогу використовувати перетворення для позиціонування. Це також може стосуватися веб-сайтів фіксованої ширини, а також рідини.

У мене така ж проблема. Я виправив це за допомогою:

.element {
  display: table
}

Ніщо з вищезгаданого не працювало на мене. У мене була ця анімація для спливаючих вікон:

@keyframes pulse {
  from {
    transform: scale3d(1, 1, 1);
  }
  50% {
    transform: scale3d(1.05, 1.05, 1.05);
  }
  to {
    transform: scale3d(1, 1, 1);
  }
}

У моєму випадку ефект розмитості зник після застосування цього правила: -webkit-perspective: 1000;навіть якщо він позначений як невикористаний у інспекторі Chrome.

Моє рішення було:

дисплей: початковий;

Тоді воно було хрустким гострим

Ніщо з перерахованого вище не працювало для мене.

Це спрацювало, коли я додав перспективи

тобто від

transform : translate3d(-10px,-20px,0) scale3d(0.7,0.7, 1)

я змінився на

transform : perspective(1px) translate3d(-10px,-20px,0) scale3d(0.7,0.7, 1)

Я виправив свою справу, додавши:

transform: perspective(-1px)

ДЛЯ ЧОРМУ:

Я спробував усі пропозиції тут. Але не вийшло. Мій коледж знайшов чудове рішення, яке працює краще:

НЕ МОЖЕТЕ масштабувати минулі 1,0

І включайте translateZ(0)в курсор, але НЕ у положення, яке не наводить курсор / початкове.

Приклад:

a {
    transition: all 500ms cubic-bezier(0.165, 0.840, 0.440, 1.000);
    transform: scale(0.8, 0.8);
}

a:hover {
    transform: translateZ(0)scale(1.0, 1.0);
}

Я використовував комбінацію всіх відповідей, і ось що, в кінцевому підсумку, спрацювало для мене:

.modal .modal--transition {
  display: inline-table;
  transform: perspective(1px) scale(1) translateZ(0);
  backface-visibility: hidden;
  -webkit-font-smoothing: subpixel-antialiased;
}

Коли я стикався з розмитою проблемою з текстом у Chrome, але не в Firefox transform: translate(-50%,-50%).

Ну, я справді намагався багато способів подолати:

transform: perspective(1px);

filter: blur(0);

transform: translateZ(0);

backface-visibility: hidden;

Жодне з них мені не працювало.

Нарешті, я зробив рівномірно висоту і ширину елемента. Це вирішило для мене питання !!!

Примітка. Це може залежати від випадку використання до випадку. Але неодмінно варто спробувати!

Я перепробував багато прикладів з цих відповідей, на жаль, нічого не допомагає для Chrome, який Version 81.0.4044.138 я додав до трансформаційного елемента

 transform-origin: 50% 50%;

ось цей

 transform-origin: 51% 51%;

це допомагає мені

Для мене проблема полягала в тому, що мої елементи використовували transformStyle: preserve-3d. Я зрозумів, що це насправді не потрібно додатку, і видалення його виправляє розмитість.

Я видалив це зі свого коду - transform-style: preserve-3d; і додав це-transform: perspective(1px) translateZ(0);

розмиття пішло!

У Chrome 74.0.3729.169, поточний станом на 5-25-19, здається, не існує жодного виправлення розмиття, яке виникає на певних рівнях масштабування браузера, викликаних перетворенням. Навіть простий TransformY(50px)розмиє елемент. Це не відбувається в поточних версіях Firefox, Edge або Safari, і, схоже, це не відбувається на всіх рівнях збільшення.

Це буде важко вирішити лише css.

Тому я вирішив це за допомогою jquery.

Це мій CSS.

.trY {
   top: 50%;
   transform: translateY(-50%);
}

.trX {
   left: 50%;
   transform: translateX(-50%);
}

.trXY {
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
}

і це мій jquery.

function tr_init() {
$(".trY, .trX, .trXY").each(function () {
    if ($(this).outerWidth() % 2 != 0) {
        var fixed_width = Math.ceil($(this).outerWidth() / 2) * 2;
        $(this).css("width", fixed_width);
    }
    if ($(this).outerHeight() % 2 != 0) {
        var fixed_height = Math.ceil($(this).outerHeight() / 2) * 2;
        $(this).css("height", fixed_height);
    }
})}

Просто додати магію виправлення, встановивши {border: 1px solid # ???} навколо погано виглядає об’єкта, вирішує проблему для мене. Якщо у вас стійкий колір фону, врахуйте і це. Це настільки німий, що ніхто не думав згадувати, мабуть, так.

ви можете використовувати css, filterщоб виправити це.

.element {
    filter: blur(0);
}

про постачальник-префікс, будь ласка, зробіть це самостійно. -webkit-filter, -ms-filter. Докладніше тут http://browser.colla.me/show/css_transformation_scale_ why_blurring

Текст не буде розмито , якщо ви не .transitiontransform

Просто зробіть це:

&:hover {
    transform: scale(1.1);
}

Без переходу як transition: all .2s;