react-zoom-pan-pinch icon indicating copy to clipboard operation
react-zoom-pan-pinch copied to clipboard

Cannot pinch-zoom with iframe child inside of `TransformComponent`

Open Jwiggiff opened this issue 10 months ago • 2 comments

Describe the bug I want to be able to pinch zoom on an element which contains an iframe inside of it. When I pinch zoom on the part of the element that is not the iframe, it works. However, when my fingers are on the iframe it does not pinch zoom, it instead zooms the entire page.

To Reproduce Steps to reproduce the behavior:

  1. Create a TransformWrapper and TransformComponent
  2. Put an iframe inside the TransformComponent
  3. Try to pinch zoom on the iframe

Expected behavior Pinch zomo should work both on the iframe and outside of it

Desktop (please complete the following information):

  • OS: MacOS
  • Browser: Arc
  • Version: 1.83.0

Smartphone (please complete the following information):

  • Device: Pixel 6
  • OS: Android 15
  • Browser chrome
  • Version 133.0

Jwiggiff avatar Mar 03 '25 16:03 Jwiggiff

The same issue for me

korczivo avatar Apr 05 '25 09:04 korczivo

I have the same requirement. I tried forwarding the iframe’s onWheel event to the parent window via postMessage, and then manually controlling the transform through a script. However, there’s a problem with this approach: when the mouse leaves the iframe element, the event gets abruptly interrupted, which results in a poor user experience.

zhanjinfeng avatar Jul 02 '25 05:07 zhanjinfeng