Allow pinch zoom in iframe

Ionic Framework
1

Hello everyone, I’m finishing my app made with Ionic 6 combined with Capacitor.

I’ve got one problem though, I’ve been searching for solutions long time but could not find one.

Let’s say I have simple page with iframe in it:

<ion-header>
  <ion-toolbar>
    <ion-title>Test iframe</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>
  <iframe [srcdoc]="myHTML | safe : 'html'" width="100%" height="100%" style="border: none"></iframe>
</ion-content>

How can I allow zooming content of an iframe?
Capacitor app is blocking pinch zooming also in the iframe and I can’t find a way to allow it here.

2

You can try pinch-zoom-js - npm
It’s possible to combine PinchZoom with swipe.js (Swipe 2)

See this topic Ionic , is it possible to pinch zoom page like web on mobile? - #11 by mjaga

3

Use swiper.js , it has behaviour to zoom HTML content too.

4

I’ve already tried it:

      const el = document.querySelector('iframe');
      new PinchZoom(el as any, { minZoom: 1, maxZoom: 4 });

But it doesn’t do anything.

I’ve also tried div [innerHTML] instead of iframe, then it kind of works, but scrolling down the page then stops working, and also innerhtml is not a good option as it gets my css styles from the page.

5

I’ve tried using swiper, it works nicely on image, but I can’t make it work with iframe or normal div with test content.

6

By default it expects to zoom one of the img , picture or canvas element. If you want to make zoom on some other custom element, then just add swiper-zoom-target class to this element

7

I get it now how it works, but my iframe is 100% width and 100% height of the page and also is scrollable inside - that’s why it doesn’t work. If i give some padding over iframe then I can pinch on that area, but not over an iframe itself.

8

This is not pinch zoom but it is another option in case of text element.

Here a tutorial: Text Zoom plugin in ionic capacitor app - YouTube

9

I’ve found webcomponents.org - Discuss & share web components.
It’s not perfect but it works in my case.

Thanks everyone for your help!

10

Could you share your code using webcomponent for pinch zoom?

11

We acheived this for a <ion-img> but you should be able to do the same on other elements. This is a modal that pops up for an image preview.

<ion-content [fullscreen]="true" scrollX="true" scrollY="true"
[fullscreen]="true"
[scrollEvents]="true">