FancyBox 1.3.4 — как устранить прыжки картинки по горизонтали?

Question

[Никита Данилов]

Добрый день! Есть сайт Joomla 3 + VirtueMart 3.0.6, к Virtuemart в поставке идёт FancyBox 1.3.4. Проблема в том, что на странице детального просмотра товара когда кликаешь чтобы увеличить изображение, увеличенные картинки часто дергаются в горизонтальном направлении, справа налево или слева направо прежде чем занять своё место.

Гуглил, но не удовлетворен тем что советы относятся к Fancybox2 (например, с помощью хелпера выставить опцию locked). Обновлять плагин (который еще много где используется в магазине) как-то не хочется, я в VM полный новичок и боюсь что-нибудь сломать :(

Вот пример как картинка ходуном ходит:
alcopribor.ru/catalog/samogonnye-apparaty/samogonn...

Наиболее часто эффект у правой картинки в ряду картинок под главной наблюдается, если по ней кликнуть и наблюдать увеличенную картинку. Также глюк вылазит если в увеличенном просмотре стрелочками влево-вправо прокручивать картинки.

1. Что можно сделать? Может в стилях нечто поправить? (Правда, нагугленный совет выключить #fancybox-content { overflow:hidden } мне не помог).

2. Подскажите какой-нибудь отладчик чтобы видеть загрузку страницы в реальном времени, как блоки на ней формируются и "устаканиваются", занимают своё место. Чтобы в любой момент можно было сделать STOP и посмотреть какой сейчас HTML/CSS код и откуда грузится. Я думаю, это бы мне очень помогло найти корень проблемы.

PS. Заранее признателен.

Answer 1

[Pribolshoy]

Сегодня тоже наткнулся на данную проблему. При увеличении и уменьшении изображения - оно скачет, увеличивается и сжимается в нужное положение.
Покопавшись обнаружил, что вся движуха происходит в div с классом fancybox-content, в нем и находится изображение. При увеличении/уменьшении происходит подгон изображения под вычисляемый размер и на время данного процесса к этому div'у добавляется стиль transition-duration, который заставляет нас наблюдать этот "скачок".

Решение: (проверено только на fancyBox v3.5.7)
- Добавить к диву с картинкой следующий стиль. Это уберет ПОЛНОСТЬЮ анимацию увеличения/уменьшения
.fancybox-slide--image .fancybox-content {
transition-duration: 0s !important;
}

- Следующий стиль добавит анимацию движения ТОЛЬКО к увеличению/уменьшению картинки, а сам ее скачок обойдет (т.к .fancybox-is-scaling добавляется к родительскому элементу только на время увеличения/уменьшения)
.fancybox-is-scaling .fancybox-content {
transition-duration: 366ms !important;
}