How to handle browser zoom in both iframe and on origin webpage.

0 favourites
  • 2 posts
From the Asset Store
All popular touch mechanics - scrolling, zooming, swiping
  • Hi everyone,

    I hope someone can help me.

    I have created an interactive tool and build it for HTML 5. I have some issues regarding browser zoom both when using it in an iframe as well as on the origin webpage where I have put the tool. I will split it up into two sub-issues in this post.

    Issue 1 - browser zoom with iframe

    Everything looks fine in the iframe and the toll is working as expected, however, when you zoom using the browser's zoom functionalities everything starts to act a bit wonky. Layers seem to scale differently ad is offset, the text starts to offset from its position, creating a very weird an unusable interactive tool. Is this a known problem and is there a solution? I have tried exporting with various different project and layer settings, however, everything ends up acting the same way.

    Issue 2 - browser zoom on origin webpage

    Again, things look fine at first glance. On the origin webpage, however, I am not able to zoom using the mouse scroll. To use the browser zoom, I need to use ctrl and +. And, when zoomed in it is not possible to pan the view. Scroll bars are not even shown. Further, when zooming in, the text blurs out a lot and I have not been able to locate any settings that can help with higher-quality text. My UI elements stay crisp as they are rendered out in 4x the scale. Does anyone have a solution to these issues?

    Tagged:

  • Try Construct 3

    Develop games in your browser. Powerful, performant & highly capable.

    Try Now Construct 3 users don't see these ads
  • OBS:

    image 1 and 3 is iframe 100% and 125% zoom

    image 3, 4 and 5 is the origin webpage 100%, 200% and 250% zoom

Jump to:
Active Users
There are 1 visitors browsing this topic (0 users and 1 guests)