Text “nudging” itself after css animation

Refresh

December 2018

Views

698 time

2

I'm having trouble making my animation rotate smoothly. After the element finishes rotating, you can see the text "pop" slightly to the left. Depending on the font-size this may or may not happen, but I'm hoping to find a way to solve this without having to set an exact font-size (because the fallback fonts are not the same size and will have the same problem). It also depends on the browser, it appears ok in Chrome, but in FireFox you can see this clearly.

Try this in FireFox: http://jsfiddle.net/SGVNr/ Can you see the text nudge left (on the bottom box)?

div {
    height: 100px;
    width: 100px;
    margin: 30px;
    background: blue;
    font: 29px/100px Arial, sans-serif;
    color: #fff;
    text-align: center;
}

#good {
    font-size: 30px;
}

div:hover {
    -webkit-animation: move 0.7s ease-out forwards;
    -moz-animation: move 0.7s ease-out forwards;
    animation: move 0.7s ease-out forwards;
}

@-webkit-keyframes move {
    0% { -webkit-transform: rotate(0deg); }
    100% { -webkit-transform: rotate(90deg); }
}

@-moz-keyframes move {
    0% { -moz-transform: rotate(0deg); }
    100% { -moz-transform: rotate(90deg); }
}

@keyframes move {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(90deg); }
}

1 answers

2

Если удалить идентификатор из верхней и отдать его на дно он исправляет эту проблему. Таким образом, дать оба элемента с font-size:30pxпомощью класса он исправляет проблему

Демонстрационные Здесь

РЕДАКТИРОВАТЬ

После того, как хороший бит исследований и испытаний, я обнаружил , что 21, 22, 25, 27, 30, 33, 34, 36, 39, 41, 43 и 45px размер шрифта (я только проверил 20-45px) все работал вы хотите , чтобы они, не прыгайте влево после поворота. Такое поведение было верно независимо от того , что других атрибутов я добавил / удалить из стиля. Это намекает мне , что это происходит из - за какой - то странный вопрос рендеринга с Firefox Вы можете сообщить об этом на форумах Firefox