Support » Plugin: WooCommerce » Full size image, zoom, distorts when larger than viewport

  • Resolved aaron843

    (@aaron843)


    On the single product page, you can click the magnifying glass icon to see the image fit to screen. So far, everything works fine. Click again (this time the cursor is a magnifying glass) and you expect to see the image at 100%, no transformation.

    Instead, it is distorted (horizontal is less than it should be) and shifted off screen (based on where you clicked).

    This code changes in the CSS: <div class=”pswp__zoom-wrap” style=”transform: translate3d(-240px, -853px, 0px) scale(1);”>

    I’ve no idea how to go about solving this.

    It happens with the 2019 theme and the 2015 theme.
    It happens in Chrome, Safari, and Firefox. It’s like the transition is using the wrong data, like screen size instead of viewport or horizontal instead of vertical.

    The error is more apparent with horizontal images that are larger than the viewport.

Viewing 5 replies - 1 through 5 (of 5 total)
  • Plugin Support EtienneP

    (@etiennep)

    Hi there!

    Can you have a look at this bug report and see if that is the same issue you are having – https://github.com/woocommerce/woocommerce/issues/23900

    If yes, there is CSS in the first comment that will temporarily fix this for you and you can add that under Appearance > Customize > Additional CSS on your site and test again to see if that fixes it.

    Yes, I figured out something similar to fix.

    aaron843

    (@aaron843)

    Fixes it on desktop. Still broken on mobile.

    Plugin Support Hari Shanker R

    (@harishanker)

    Automattic Happiness Engineer

    Hi @aaron843

    Happy to hear that we’ve made some progress, at least in the desktop. Can you share a screenshot of the problem you see in mobile devices?

    I recommend https://snag.gy for easily sharing screenshots – please follow the instructions on the page, then paste the URL in your reply to this thread. It works with Chrome, Firefox and Edge.

    We look forward to hearing back from you!

    Plugin Support m155y5

    (@m155y5)

    Automattic Happiness Engineer

    We haven’t heard back from you in a while, so I’m going to go ahead and mark this thread as resolved. If you have any other questions please feel free to start a new thread.

Viewing 5 replies - 1 through 5 (of 5 total)
  • You must be logged in to reply to this topic.