FancyBox 1.3.4 - how to fix image jumps horizontally?

Question

Joomla

Good afternoon! There is a site Joomla 3 + VirtueMart 3.0.6, Virtuemart comes with FancyBox 1.3.4. The problem is that on a product detail page, when you click to enlarge an image, the enlarged images often twitch horizontally, right to left, or left to right before falling into place.
I googled, but I'm not satisfied that the tips refer to Fancybox2 (for example, use the helper to set the locked option). I somehow don’t feel like updating the plugin (which is still used in many places in the store), I’m a complete novice in VM and I’m afraid to break something
:(
.
Most often, the effect of the right picture in the row of pictures under the main one is observed if you click on it and watch the enlarged picture. Also, a glitch will pop up if you scroll the pictures in the enlarged view with the arrows left and right.
1. What can you do? Maybe fix something in the styles? (However, the googled advice to turn off #fancybox-content { overflow:hidden } did not help me).
2. Prompt some debugger to see the page loading in real time, how the blocks on it are formed and "settle down", take their place. So that at any time you can make a STOP and see what HTML / CSS code is now and where it is loaded from. I think it would help me a lot to find the root of the problem.
PS. Thanks in advance.

Answer 1

Today I also stumbled upon this problem. When you zoom in and out of the image - it jumps, increases and shrinks to the desired position.
After some digging, I found that all the action happens in a div with the fancybox-content class, and the image is located in it. When zooming in and out, the image is adjusted to the calculated size, and for the duration of this process, the transition-duration style is added to this div, which makes us observe this "jump".
Solution: (only tested on fancyBox v3.5.7)
- Add the following style to the image div. This will remove the FULLY zoom in/out
animation .fancybox-slide--image .fancybox-content {
transition-duration: 0s !important;
}
- The following style will add motion animation ONLY to zoom in/out of the image, and the jump itself will bypass it (because .fancybox-is-scaling is added to the parent element only during zoom in/out)
.fancybox-is-scaling .fancybox-content {
transition-duration: 366ms !important;
}