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

Broken when using portal windows on Mac - Chrome

Open p-foucht opened this issue 2 years ago • 1 comments

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.

p-foucht avatar Mar 23 '22 16:03 p-foucht

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.

yuchunli avatar Jul 14 '22 18:07 yuchunli