Преобразование CSS3 — проблема размытия и мерцания — в контейнере с пикселем с нечетным номером

У меня проблема с размытием и мерцанием во время анимации css в Chrome.

Во-первых, я должен сказать, да, я знаю небольшое исправление, использующее:

-webkit-backface-visibility: hidden;

Но в моем случае я не заставляю его работать.

Чтобы центрировать контейнер, я использую следующий код:

position: absolute;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);

Ширина и высота этого DIV являются динамическими. Теперь проблема:

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

https://jsfiddle.net/reuse52p/

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

Искренне


google-chrome css css-transitions css-transforms
person Vieper    schedule 24.03.2015    source источник
comment
Я играл с этим JSFiddle больше часа, и я нигде. Отлично работает в Файрфоксе. И вы правы, это происходит только тогда, когда .inner высота и/или ширина установлены на нечетное число. (Как ты это понял?) Очень странно. Записать это как ошибку и отправить ребятам из Chrome? А что касается нечетной ширины/высоты, если (нечетная) добавить ее в JS? Да, я знаю, что это ужасный взлом.   -  person zipzit    schedule 25.03.2015
comment
Привет @zipzit, спасибо за ваше время ;-) Я потерял более 1 часа на эту проблему, и да, также нужно немного времени, чтобы понять, что причиной этой проблемы является пиксель с нечетным номером ;-) Я также думал о взломе JS, но моя проблема в том, что высота .inner является динамической (она не устанавливается через css, как в моем примере), это означает, что высота может меняться со временем после инициализации. Как я могу вызвать это изменение в JS?   -  person Vieper    schedule 25.03.2015

Ответы (1)


arrow_upward
3
arrow_downward

Попробуйте этот код. какой-нибудь хак css удалит с него размытие и мерцание.

Добавьте это свойство, чтобы удалить размытие и мерцание!

-webkit-perspective: 1000;
  -webkit-font-smoothing: subpixel-antialiased;
  backface-visibility: hidden;
  transform: translateZ(0);

См. демо ниже

$(document).ready(function() {
  $(".anim").click(function() {
    $(this).toggleClass("bigger");
  });
});
.outer {
  position: relative;
  height: 500px;
  width: 500px;
  background: #ccc;
  -webkit-perspective: 1000;
  -webkit-font-smoothing: subpixel-antialiased;
}
.inner {
  position: absolute;
  width: 300px;
  height: 300px;
  background: #e5e5e5;
  top: 50%;
  left: 50%;
  margin-top: -150px;
  margin-left: -150px;
}
.anim {
  width: 100px;
  height: 50px;
  background: #fff;
  text-align: center;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -50px;
  margin-top: -25px;
  -webkit-transition: -webkit-transform 1s ease;
  -moz-transition: -moz-transform 1s ease;
  -o-transition: -o-transform 1s ease;
  transition: transform 1s ease;
  -webkit-perspective: 1000;
  -webkit-font-smoothing: subpixel-antialiased;
  backface-visibility: hidden;
  transform: translateZ(0);
}
.bigger {
  transform: scale(2);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<div class="outer">
  <div class="inner">
    <h2>Flickering!</h2>

    <div class="anim">Click me</div>
  </div>
</div>

Ссылка

person Suresh Karia    schedule 04.04.2015
comment
Эй, @Eirenaios, спасибо за твой ответ. В вашей демонстрации вы используете минус пиксель для поля слева и сверху, чтобы центрировать div, поэтому вы не используете transform: translate(-50%, -50%); больше, что вызывает проблему с мерцанием. В моем случае я не могу использовать определенный отрицательный пиксель поля для центрирования контейнера, потому что я не знаю, насколько большим будет div. Вот почему я использую transform: translate(-50%, -50%); потому что не имеет значения, насколько велик div... К сожалению, этот хак не решает мою проблему. - person Vieper; 07.04.2015