FloatingOverlay react component causes visible scrolling on iOS when the scroll behaviour of its container is 'smooth'
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:
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,
:root {
scroll-behavior: smooth;
}
.buffer {
height: 200vh;
}Then, in Reproducer.tsx
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,
- Scroll down to the
selectelement and open it. - Close the
selectelement. - 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
Source: floating-ui/floating-ui