Images are not zoomed in the center of the viewport when document is displayed within an iframe

[PiiXiieeS]

Images are not zoomed in the center of the viewport When zooming is used in a site embedded as an iframe the zooming effect while works it is not positioned in the center of the visible part of the window.

To Reproduce Simple embed a page as an iframe resizing the frameHeight to be equal to the full size of the child content.

    <iframe
      id="cpv-iframe"
      class="myframe"
      width="100%"
      height="1000px"
      :src="url"
      @load="load('cpv-iframe')"
    >
    </iframe>

with load ...

    load(id) {
      window.onmessage = (e) => {
        if (Object.prototype.hasOwnProperty.call(e.data, 'frameHeight')) {
          document.getElementById(id).style.height = `${
            e.data.frameHeight + 30
          }px`
        }
      }
    },

Expected behavior The image should zoom and center in the visible part of the document within the iframe. The function getWindowCenter is not retrieving the center of the window but the center of the full document/iframe.

Additional context Any help or direction to implement this fix so the zoom effect works also inside an iframe is welcome and I will try to implement and to make a pull request.

[kingdido999]

Would it be possible for you to reproduce this issue in codepen?

[PiiXiieeS]

Here you are: https://codepen.io/piixiiees/pen/abZOJzJ

[kingdido999]

Thanks! I don't have much bandwidth to work on this, but feel free to give it a try.

You probably want to begin with understanding the Zooming.open() method, more specifically these method calls which basically translate & transform the target image and then inject the overlay element. We're currently calculating the transformation and inserting the overlay based on the element's document window, that's why we faced this issue. Therefore, we need to do those operations against the root window instead of the iframe window. I guess one key thing is to get the position of the image relative to the root window instead of the iframe window, which might not be very straightforward.

Anyway, that's my thoughts and if you still want to give it a shot, feel free to do so and let me know if you have any questions!