Question

I’ve wrote a simple sticky-notes page. Every note is a list item containing content in paragraph, delete button in span and an image with tooltip. Here`s a piece of HTML containing one note:

<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>

And here`s the 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;
}

The issue is, that with this code whole note scales ok, but then after scaling is complete the text (both in p and span) resizes itself a bit (I don’t know, about 1-2px) and it looks really bad. Removing -moz-transition from ‘ul li a’ fixes the issue, but then scaling isn’t smooth at all. Has any of you encountered similiar issue?
I’ve tried this also:

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

But this doesn’t help. Is there any way to use css transformation scale without the ‘jumping’ text? I’d prefer not to use jQueryUI for now, it’s too heavy for using it only for this simple task.

Here`s jsfiddle for this:
Notes

Of course you have to run it from firefox to observe the issue. On chrome it works ok AFAIK.

UPDATE: I’ve to run it under FF8.0, but I’ve installed 13.0.1 and this glitch is also visible there.

Answer 1

just change the font size 105% to 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;
  }