Сдвиг изображения / переход после эффекта перехода CSS с масштабным преобразованием в Firefox

Question

У меня проблема в последней версии браузера Firefox 34 (система: Windows 7, ширина экрана: 1600px). Я сделал эффект с увеличением изображений (в каком-то контейнере) после наведения на него. Я использую transform: scale(1.1) с переходом: transform 0.3s easy-in-out. Но когда я наведу курсор на изображение и после увеличения масштаба изображения... произойдет странное смещение на 1 пиксель. Некоторая ошибка рендеринга в браузере, но я надеюсь, что существующее исправит это. Пожалуйста помоги!

Самое важное определение CSS:

figure {
   display: block;
   overflow: hidden;
   position: relative;
   backface-visibility: hidden;
}
figure img {
   width: 100%;
   transform: scale(1);
   transition: transform 0.3s ease-in-out;
   }
figure:hover img {
   transform: scale(1.1);
}

..и часть HTML-кода:

 <figure>
     <img class="img-responsive" src="http://lorempixel.com/600/400/fashion/7">
 </figure>

---

Пример с ошибкой можно найти здесь: http://templates.silversite.pl/test/jumpingimg/

Я также видел, что кто-то может это исправить, но я не знаю, как, например, вставка "Наши последние работы" на http://demo.qodeinteractive.com/bridge/

Answer 1

У меня была похожая проблема в моем проекте. Все изображения были position: absolute; и преобразование выглядит так:

figure img{
   transform: translate( -50%, 50%) scale(1);
   position: absolute;
   top: 50%;
   left: 50%;
}

figure img:hover{
   transform: translate( -50%, 50%) scale(1.1);
}

Я заменяю каждый scale с scale3d и это решило мою проблему. Окончательные стили выглядят так:

figure img{
   transform: translate( -50%, 50%) scale3d(1, 1, 1);
   position: absolute;
   top: 50%;
   left: 50%;
}

figure img:hover{
   transform: translate( -50%, 50%) scale3d(1.1, 1.1, 1);
}

Надеюсь, это решит вашу проблему

Answer 2

По ссылке, которую вы указали, http://demo.qodeinteractive.com/bridge/, если вы действительно пойдете сюда: http://demo.qodeinteractive.com/bridge/portfolio/gallery-style-condensed/two-columns-grid/, вы можете видеть, что, посмотрев на инструменты разработчика, они применяют поле "1px" слева / справа

.projects_holder.hover_text.no_space article .image img {
   margin: 0 1px;
}

Если вы отключите этот стиль, вы увидите, что изображение движется так, как вы его описываете при наведении на изображение.

Следовательно, ваш CSS для изображения должен быть:

figure img {
   width: 100%;
   transform: scale(1);
   transition: transform 0.3s ease-in-out;
   display: block;  /* (or inline-block) */
   margin: 0 1px;
}

Answer 3

7,5 лет спустя это все еще проблема, и теперь решениеwill-changecss свойство. Только IE не получит этого, но у других, похоже, все в порядке - больше не прыгают пиксели ( редактировать : на экранах без сетчатки).

      figure {
   display: block;
   overflow: hidden;
   position: relative;
   backface-visibility: hidden;
}
figure img {
   width: 100%;
   transform: scale(1);
   transition: transform 0.3s ease-in-out;
}
figure:hover img {
   transform: scale(1.1);
   will-change: transform;
}

Answer 4

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

Как и в OP, у меня был контейнер со скрытым потоком, и он был того же размера, что и изображение внутри него. Изображение будет масштабироваться при наведении, чтобы создать эффект «масштабирования», но при первоначальном запуске и завершении перехода изображение «прыгало» / немного увеличивалось внизу и справа. Это сделало его дерганым и не гладким.

Я рассчитал размеры своих компонентов на основе процентов, из-за чего они были нецелыми (Chrome). У меня такое ощущение, что Scale & Scale3d округляет значения пикселей при масштабировании, что и вызвало этот скачок. Я дал родительский контейнер display:table, из-за чего ширина/высота всех дочерних элементов округлялись до целочисленного значения. Это решило проблему для меня, и изображения теперь масштабируются плавно!

Answer 5

I just run over the same issue and for me it looks like that the browser corrects the decimal pixel after the scaling is done. Or some how the height and the width doesn't get scaled equals and that gets corrected in the end.

So I think the solution is to use an image with a 1 x 1 ration factor.

So for me the code of the question works fine when I use a the lorempixel with a width and height of 400px.

Let me know if that solves the issue?!

figure {
   display: block;
   overflow: hidden;
   position: relative;
   backface-visibility: hidden;
}
figure img {
   width: 100%;
   transform: scale(1);
   transition: transform 0.3s ease-in-out;
   }
figure:hover img {
   transform: scale(1.1);
}

 <figure>
     <img class="img-responsive" src="http://lorempixel.com/400/400/fashion/7">
 </figure>