Prevent Safari from zoom after interact with iframe

Question

I am using a Paddle payment system with an overlay method. In this case, it renders an iframe in the DOM, then I tap the input within that iframe to enter credit card data, etc. and then close the iframe - I'm back at my site with an enlarged interface.

I did some research and found several solutions, such as: <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />. and -webkit-text-size-adjust: none !important; touch-action: none !important; - css rule for iframe But it doesn't work for me, maybe someone knows the answer?

Answer 1

It's been a while... discovered that paddleJs, when you open their iframe, add a meta tag with viewport to your DOM and this causes scaling on IOS, so the solution with React is as follows:

Add a useEffect that removes that meta tag from the DOM and everything works fine.

useEffect(() => {
    const observer = new MutationObserver((mutationsList) => {
      for (const mutation of mutationsList) {
        if (mutation.type === 'childList' && mutation.addedNodes.length > 0) {
          document
            .querySelector('[id="__mobileViewportControl_hook__"]')
            ?.remove();
        }
      }
    });
    observer.observe(document.querySelector('head')!, {
      childList: true,
    });
    return () => {
      observer.disconnect();
    };
  }, []);