Zoom triggered outside bounds of image problematic

Could you tell me exactly which is the tabbed section or on which page do I find the tabbed section? Currently I don’t see any tabs on the linked page.

Hi Diana,

My apologies, I had hidden the tabbed section and changed the display to fix the problem temporarily.

I’ve set up a test page to recreate the issue: https://tapabar.ca/test-page/

Please be sure to check both tabs, accessing the image from different angles, and refreshing the page, as sometimes the behavior changes.

My instinct tells me this has something to do with the container the images are in. Possibly setting a flexible height or fixed height on the container may be something to do with resolving this.

Thanks for you attention on this,
David

Hello David,

if you open the page with a network throttle, then you’ll notice that the header renders much larger for a fraction of a second, then it snaps into its final size. This has to do with the logo image’s height, as it can be calculated only after the Jetpack lazy loading functionality loads the logo image.

The zoom lens is built and placed on top of the image during page load. If the zoom lens is built before the header snaps into its place, then it will be misaligned with the underlying image, with the effect that the zoom will trigger outside the bounds of the underlying image. Depending on the browser cache, the logo image might get loaded before the zoom lens is built, therefore the inconsistency of the “triggered outside bounds” effect.

In the Astra theme’s custom CSS settings field you’ll find the header .custom-logo-link img{max-width:270px;} CSS rule defined. By adding also the max-height: 103px; declaration to the CSS rule, the header’s size will be correctly rendered during page load, which will also allow the zoom lens to be aligned with its underlying image.

Hi Diana,

Sorry for the delay. I’ve applied the additional style declaration that you suggested and I’m not sure if it’s had any visible effect. What I have noticed is that if a page is not zoomed to 100% on desktop, the “perceived” image size in the browser can cause the zoom function to trigger early/late, i.e: when not hovering over the image or when hovering over the image.

I use the WP Image Zoom plugin on a sister site to the one I linked to previously. Currently, the zoom function isn’t working at all on this sister site: https://bodegabar.ca/.

I’ve verified the .zoooom class is applied to the images (menus) and no custom CSS is added on the images. I’ve also deactivated Lazy Loading on Jetpack by still I’m not able to trigger the Zoom function.

On the back-end of Elementor, when I edit the image, I can see the class applied and see the text on the image that says ‘Zoom applied to the image. Check on the frontend’.

I’m hoping you can take a look at the sister website and diagnose what is wrong?

Thanks very much,
David

• This reply was modified 2 years, 2 months ago by Dave Gaskin. Reason: Add additional detail

Hi David,

would you try uploading a larger image of the menu? Currently the uploaded image is 650px width and rendered on the page at 920px width. So the image is already stretched on the website. Applying the zoom effect on this image will make the image inside the zoom lens rather blurry and unclear. If you’ll upload the image at around 1380px width (920px * 1,5), then the zoom effect should work alright.

Diana,

Thank you for the reply. We’ll give that a try and get back to you if we have further issues.

David