CSS-преобразование на li заставляет текст в дочерних элементах «прыгать» после масштабирования в Firefox

Я написал простую страницу с заметками. Каждая заметка представляет собой элемент списка, содержащий содержимое в абзаце, кнопку удаления в диапазоне и изображение с всплывающей подсказкой. Вот кусок HTML, содержащий одну заметку:

<ul id="wall" class="ui-sortable">
  <li id="note1">
    <a href="#">
      <span class="del">x</span>
      <p>1221212 23 23 3322 3223</p>
      <img src="..."/>
      <div class="tooltip">Tooltip</div>
    </a>
  </li>
  .
  .
  .
</ul>

А вот css:

ul li a
{
  outline: none;
  text-decoration: none;
  display: block;
  height: 200px;
  width: 200px;
  -moz-transition: -moz-transform 0.2s ease;
}

ul li a:hover
{
  -moz-transform: scale(1.1);
  -webkit-transform: scale(1.1);
  font-size: 105%;
  position: relative;
}

ul li p
{
  overflow: hidden;
  margin: 0;
  padding: 20px;
  -moz-user-select: none;
  font-size: 120%;
  font-style: italic;
}

.del
{
  -moz-user-select: none;
  font-size: 22px;
  position: absolute;
  left: 183px;
  float: right;
  display: none;
  padding: 2px 5px 0 0;
}

Проблема в том, что с этим кодом вся заметка масштабируется нормально, но затем, после завершения масштабирования, текст (как в p, так и в span) немного меняет размер (я не знаю, около 1-2 пикселей), и это выглядит очень плохо. Удаление -moz-transition из 'ul li a' решает проблему, но тогда масштабирование совсем не гладкое. Кто-нибудь из вас сталкивался с подобной проблемой? Я пробовал это также:

-moz-transition: -moz-transform 0.2s ease;
-moz-transition: font-size 0.2s ease;

Но это не помогает. Есть ли способ использовать масштаб преобразования CSS без «прыгающего» текста? Я бы предпочел пока не использовать jQueryUI, он слишком тяжелый, чтобы использовать его только для этой простой задачи.

Вот jsfiddle для этого: Примечания

Конечно, вы должны запустить его из Firefox, чтобы увидеть проблему. На хроме работает нормально, AFAIK.

ОБНОВЛЕНИЕ: Приходится запускать под FF8.0, но я поставил 13.0.1 и там тоже виден этот глюк.


css css-transforms firefox
person Ziouas    schedule 21.06.2012    source источник
comment
попробуйте показать свой код в jsfiddle.net   -  person khurram    schedule 21.06.2012
comment
Хорошо, добавил jsfiddle. Попробуй запустить на firefox.   -  person Ziouas    schedule 21.06.2012
comment
Вы имели в виду, что ваш текст ‹p› изменяется, и некоторые символы переходят на строку ниже при наведении курсора на li?   -  person khurram    schedule 21.06.2012
comment
Нет, я имею в виду небольшой эффект «прыжка» шрифта после завершения масштабирования.   -  person Ziouas    schedule 21.06.2012

Ответы (1)


arrow_upward
0
arrow_downward

просто измените размер шрифта со 105% на 100%.

ul li a:hover
  {
    -moz-box-shadow: 10px 10px 7px black;
    -webkit-box-shadow: 10px 10px 7px black;
    -moz-transform: scale(1.1);
    -webkit-transform: scale(1.1);
    font-size: 100%;
    position: relative;
  }
person khurram    schedule 21.06.2012
comment
Вы можете просто полностью опустить размер шрифта (в любом случае это 100%). - person Christoph; 21.06.2012
comment
Это не помогает. Даже удаление атрибута размера шрифта из наведения не помогает. Он все еще немного глючит после масштабирования. Это небольшой, но очень раздражающий глюк. Вроде какого-то ненужного сглаживания или увеличения. Я не знаю, что это такое. - person Ziouas; 21.06.2012
comment
@Ziouas, он отлично работает в моем FF13, если не указывать размер шрифта (без нарушений). Однако вы не можете изменить перерасчет|рендеринг размера шрифта после завершения перехода. Все браузеры делают это для улучшения читаемости шрифтов. - person Christoph; 21.06.2012
comment
Хорошо, я не упомянул, что мне придется заставить его работать под firefox 8. Из чего Кристоф worte я понимаю, что в более поздних версиях это было изменено, и я не могу переопределить это в 8.0? - person Ziouas; 21.06.2012
comment
Я отказался от всего эффекта преобразования, теперь я только масштабирую его. Я не знаю, куда сообщить об этом. - person Ziouas; 29.06.2012