FloatingOverlay react component causes visible scrolling on iOS when the scroll behaviour of its container is 'smooth'

Author: cdillondCreated May 16, 2026Updated Jun 9, 2026
LabelsNEEDS: triage

Describe the bug When a document's :root element has its scroll-behavior set to smooth and it includes a FloatingOverlay react component with lockScroll, toggling the FloatingOverlay component causes the view to jump to the top and then scroll smoothly back to the original position. This doesn't happen with other user agents.

I am fairly certain the problem is that this line: https://github.com/floating-ui/floating-ui/blob/d8020ee98c702caa31fa9b4d929ca782c6b58c59/packages/react/src/components/FloatingOverlay.tsx#L68 should instead be:

javascript
window.scrollTo({top: scrollY, left: scrollX, behavior: 'instant'});

To Reproduce CodeSandbox seems to think I'm a bot, but a reasonably minimal reproducer looks like this: In a file named, e.g. index.css,

css
:root { 
    scroll-behavior: smooth;
 }

.buffer { 
    height: 200vh;
 }

Then, in Reproducer.tsx

typescript
import './index.css'
import { useState } from 'react'
import { FloatingOverlay } from '@floating-ui/react'

export function Reproducer() {
    const [open, setOpen] = useState(false);
    const toggle = () => setOpen((prev) => !prev);
    return (
        <>
            {open && <FloatingOverlay lockScroll />}
            <div className='buffer'>top</div>
                <select onFocus={toggle} onBlur={toggle}>
                    <option>hello</option>
                    <option>world</option>
                </select>
            <div className='buffer'>bottom</div>
        </>
    )
}

Steps to reproduce the behavior: On an iOS device running Safari,

  1. Scroll down to the select element and open it.
  2. Close the select element.
  3. When I do this, the screen jumps to the top and then scrolls back down smoothly. If the same steps are followed on other devices, this does not happen.

Expected behavior The behaviour should be the same on all user agents. Removing the FloatingOverlay shouldn't cause the document to scroll.

Context:

  • OS: iOS
  • Browser Safari