Устойчива ли трансформация CSS3 в Firefox 3.6?

Question

Я реализовал CSS3-преобразование изображения, где я масштабирую и транслирую его. При наведении курсора на изображение для преобразования полученное изображение иногда будет мигать или не появляться. Я должен немного передвинуть мышь, чтобы заставить ее придерживаться. Это проблема с моим кодом или реализацией в Firefox 3.6?

HTML:

<a class="image-transform" href="#" title="William and Catherine"><img src="images/William_Walter_and_Catherine_Rowe.jpg" alt="William Walter and Catherine Rowe"/></a>

CSS:

.image-transform img
{
    float:right;
    width: 75px;
    background-color: #ffffff;
    margin: 1em 1em 1em 1em;
    padding: 3px;
    border: solid 1px;
    -moz-box-shadow: 5px 5px 5px #888;
    -o-box-shadow: 5px 5px 5px #888;
    -webkit-box-shadow: 5px 5px 5px #888;
    box-shadow: 5px 5px 5px #888;
    -moz-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
}
.image-transform:hover img 
{
/*  width: 300px;*/
    -moz-transform: scale(4) translate(-60px);
    -webkit-transform: scale(4) translate(-60px);
    -o-transform: scale(4) translate(-60px);
    transform: scale(4) translate(-60px);
}

Эта рабочая страница находится по адресу: http://www.amcolan.info/Rowe/rowe.php. Это единственная маленькая фотография на правом поле. Я использовал решение javascript на другой странице, которое хорошо работает, но я решил попробовать CSS3.

Спасибо за любую помощь.

Answer 1

Причина действительно очень проста.Посмотрите на это изображение:

Смотрите, когда вы наводите курсор на элемент, селектор :hover начинает действовать, он расширяется и перемещается, таким образом удаляясь от вашегомышь.Теперь, когда элемент находится под , а не под вашей мышью, селектор :hover не вступит в силу, и элемент вернется в исходное положение под вашей мышью.Затем цикл повторяется.

Теперь CSS-переходы не поддерживаются в Firefox 3.6, поэтому это происходит мгновенно или так быстро, как браузер может перерисовать экран, поэтому он кажется «мерцающим» или «мигающим».

Решение состоит в том, чтобы убедиться, что элемент всегда находится под мышью во всех частях анимации, или, альтернативно, используйте JavaScript, откуда вы можете использовать события и очереди, чтобы получить более детальный контроль над анимацией,