Iframe stops scrolling after resizing via handle

[anlinguist]

After resizing via handlebar, my iframe in a panel no longer scrolls vertically. However, after calling Panel.resize() in my double click handler, the iframe can still scroll. I attempted to call Panel.resize() on panel resize, but it didn't work (maybe it checks prev val and doesn't perform the op if they're the same val?). I've worked around this issue by adding a key to my ContentPreview and then setting panelSize anytime we resize manually or via double click. Only problem with this approach, of course, is that my iframe rerenders every time I resize.

<PanelGroup direction="horizontal" style={{ overflow: 'clip' }}>
    <Panel onResize={resized} ref={ref} defaultSize={50} minSize={20} style={{ height: '100%', borderRadius: "6px" }}>
        <Editor value={value} setValue={setValue} />
    </Panel>
    <PanelResizeHandle
        className={`panel-separator${isDragging ? ' active' : ''}`}
        onClick={trackDoubleClick}
        onDragging={handleDragging}
    />
    <Panel defaultSize={50} minSize={20} style={{ height: '100%', display: 'flex', flexDirection: 'column', overflow: 'clip' }}>
        <ContentPreview iframeSrc={iframeSrc} />
    </Panel>
</PanelGroup>

Here's a codesandbox which shows the issue: https://codesandbox.io/p/sandbox/fcttdr

In the sandbox, you can scroll in the right panel. However, if you drag the handlebar either way, you can no longer scroll that panel (although I will say it's inconsistent, sometimes it will scroll and I haven't been able to determine why sometimes it scrolls and sometimes it doesn't). If you add key={panelSize} to the ContentPreview component, it fixes the issue. Preferably wouldn't need to force a rerender on the entire component though.

Also, I did try swapping the panels - the same issue exists.

[bvaughn]

Works for me.

[bvaughn]

I'm not sure what to do with this issue. I can't repro with the attached code. Without any more info, I'm going to close it for now as not actionable.

[anlinguist]

Do you think this could be caused by OS or browser? I'm still seeing the issue when I test it in the sandbox. Can try to take a loom video of it tomorrow.

I'm on a MacBook Pro M2 Sonoma 14.0, using Chrome 129.0.6668.60.

[bvaughn]

Might help if you recorded a Replay. A video isn't likely to help me debug it any.

If you can repro it though, and wanna post a PR with a proposed fix, I'm happy to review it.

[anlinguist]

I tried recording the Replay, but couldn't reproduce the issue in the replay browser.

What's weird is I tested the mvp locally on chrome, canary chrome, and safari and each repros the issue, but can't repro on the replay browser 🤦 Also, I cannot replicate the issue on Firefox.

[bvaughn]

That’s unfortunate 😔

[json-q]

I encountered the same issue, and I can reproduce it using your sandbox.

I don't think it happens every time, but the probability is quite high. It's very strange. When I can't scroll with the mouse, if I press and hold the arrow keys to make it scroll, then try using the mouse wheel again, it starts working.

[nodespell]

I have the same issue here, but I found a way to reproduce it consistently.

It's better done with a mouse. If you drag the resize handle very fast and release, what this will do is that the handle doesn't have time to catch up with the pointer, so that at the moment of release, the pointer is not over the handle itself. This action WILL NOT CAUSE the problem. However, the problem comes when you drag slowly and when releasing the pointer, it is directly over the handle itself. In this case, the iframe's scrolling function will break. If you keep dragging so that the handle reaches its limit in one direction, and release the pointer outside of handle, it will break the iframe's scrolling as well.

I tried many things but this issue persists.

[zachrip]

I also have this issue. I think it must be a bug in webkit triggered by something that's happening in this library. I've created a webkit bug for this: https://bugs.webkit.org/show_bug.cgi?id=300030 which includes a video. I tried to repro this with a small set of html/js but I couldn't which leads me to believe that perhaps something the library is doing (besides resizing with flex basis) is causing it.

[bvaughn]

Thank you for filing a web kit bug!

On Fri, Oct 3, 2025 at 11:50 AM zachrip @.***> wrote:

zachrip left a comment (bvaughn/react-resizable-panels#419) https://github.com/bvaughn/react-resizable-panels/issues/419#issuecomment-3366253893

I also have this issue. I think it must be a bug in webkit triggered by something that's happening in this library. I've created a webkit bug for this: https://bugs.webkit.org/show_bug.cgi?id=300030 which includes a video. I tried to repro this with a small set of html/js but I couldn't which leads me to believe that perhaps something the library is doing (besides resizing with flex basis) is causing it.

— Reply to this email directly, view it on GitHub https://github.com/bvaughn/react-resizable-panels/issues/419#issuecomment-3366253893, or unsubscribe https://github.com/notifications/unsubscribe-auth/AAAHHHKW7B5L5XB2VCBTGP33V2LMJAVCNFSM6AAAAABPF262OKVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZTGNRWGI2TGOBZGM . You are receiving this because you modified the open/close state.Message ID: @.***>