react-zoom-pan-pinch
react-zoom-pan-pinch copied to clipboard
Broken when using portal windows on Mac - Chrome
Background
My team has a niche use case where we pop out content into its own window, via window.open
and React.createPortal
.
Issue
In Chrome, something seems to be breaking the library when the window is popped out. The transform
styles are not being applied.
Weirdly enough, if you pop the window out and make it split screen, the zooming works as expected.
I am testing on Mac (Monterey) Chrome 99.
Demo
https://codesandbox.io/s/react-hooks-playground-forked-porlhu?file=/src/Portal.tsx
Note Make sure you have popups enabled for the site, otherwise the window won't open
Repro steps
Using the demo above...
- Click button to open a portal window
- Try to zoom/zoom out. No styles are applied to element
- Detach window from browser, and make it a split window
- Zooming works normally
This may be a browser/OS bug, given the repro steps. I will take a look/submit a PR, but hoping to see if the codebase owners had any quick ideas.
Our team is seeing a similar issue when the portal window is in full screen. It can reproduce using the same demo above, you have to make the portal/pop up window full screen.