Scaling an iframe on mobile devices

[lars-brinkmann]

Describe the bug

Hi, I'm using Fancybox with an imagemap, displayed in an iframe. When clicking on it on mobile devices, I can't scale the Iframe/image to have a closer look to the details. In v4 it was possible and with type image it also works.

Addition: When you try to zoom the iframe with your fingers, the entire page behind the fancybox is zoomed. The FB itself just flicker. autoFocus and trapFocus are set to true.

Reproduction

See description

Additional context

No response

[fancyapps]

Hi, Could you, please, create a demo using any code playground (jsfiddle, codepen, etc)?

[lars-brinkmann]

Hi, here is a link to the demo: http://example.netzbuero.de/ http://example.netzbuero.de/

If you click on the image map, the Lightbox opens as defaultType: iframe. If you try to zoom the iframe with your fingers, the Lightbox flicker. Close the Lightbox and you will see, that the zoom has effect on the entire page.

With Version 4 it works, you can try it here: https://kitaverband-mw.de

There you find the same imagemap from the demo. Click on it and try to zoom the iframe in the Lightbox. It works.

Am 31.07.2023 um 12:59 schrieb Jānis Skarnelis @.***>:

Hi, Could you, please, create a demo using any code playground (jsfiddle, codepen, etc)?

— Reply to this email directly, view it on GitHub https://github.com/fancyapps/ui/issues/538#issuecomment-1658143627, or unsubscribe https://github.com/notifications/unsubscribe-auth/AVULBPOGGQWTKKEAO5HGL2DXS6F2ZANCNFSM6AAAAAA2VED7JA. You are receiving this because you authored the thread.

[fancyapps]

I will try to do something about this, but, in the meantime, maybe just create direct links, like this - https://jsfiddle.net/fhL4oeq8/ - and, if you can, edit svg files and add width/height attributes.

[fancyapps]

You see, the parent page doesn't receive touch/click events that happen inside the iframe (due to browser security policy), therefore Fancybox doesn't affect or control what happens inside the iframe after a touch or a gesture like pinch-to-zoom.

The flickering you describe can happen if the user tries to scale the entire web page. Fancybox then automatically scales self to maintain a 1:1 scale. Otherwise, the user would scale everything, including UI elements like the close button. There is currently no way to disable it, but if it is really necessary, it will be implemented upon request.