"ResizeObserver loop limit exceeded" when going into fullscreen mode

[joshuaball]

Hello,

This error occurs only on Chrome (desktop versions are what I tested with). When sending a DOM element into fullscreen mode via element.requestFullscreen, I'm getting the "ResizeObserver loop limit exceeded" error. In my case, I have a video element that is a sibling to the ReactResizeDetector which is bound to the parent DOM element of both. The onResize property is triggered when the video element goes in/out of fullscreen. I'm on version 4.2.1.

Browsers: Chrome - Version 77.0.3865.90 (Official Build) (64-bit) Version 74.0.3713.1 (Official Build) canary-dcheck (32-bit)

OS: Windows 10, and Mac (most recent version)

Please let me know if there is any other info I can provide.

Thanks,

-Josh

[maslianok]

I wrote this code snippet in order to reproduce the bug:

      <div style={s.wrapper} ref={this.parentRef}>
        <video autoPlay="autoplay" height="150" width="300" ref={this.videoRef}>
          <source src="http://utsa.edu/peacecenter/video/water.webm" type="video/webm" />
        </video>

        <button onClick={() => this.videoRef.current.requestFullscreen()} type="button">
          Go fullscreen
        </button>

        <ResizeDetector handleWidth handleHeight onResize={this.onResize} targetDomEl={this.wrapperRef.current} />
      </div>

Seems the structure is similar to the one you described. But everything works on my end.

Can you please provide a code snippet that shows the bug?

[maslianok]

Closing due to lack of information