Comments (6)
Version: @floating-ui/react v0.25.4
This is a bit old. What about the latest 0.26.13
?
The lockScroll
on FloatingOverlay
could be a problem. What happens if it's removed? Without a minimal reproduction, it's hard to debug this though.
from floating-ui.
I updated to 0.26.13
and the problem persists. I've been able to track it down to either lockScroll
or this CSS:
html, body {
height: 100%;
}
The problem goes away if I either comment that CSS out, or remove lockScroll
. Unfortunately I still can't reproduce it in a code sandbox because my project is so complex.
from floating-ui.
I just figured out the true problem:
html {
overflow-y: scroll;
}
The sad part is that I have no idea why I ever added that (it was lurking at the bottom of my global CSS file). 🤦♂️
Sorry for wasting your time, but if someone else runs into this hopefully they can learn from my mistake.
from floating-ui.
FWIW, I was able to reproduce it in this code sandbox:
from floating-ui.
It's probably good to mention this potential issue under a Troubleshooting
section for FloatingOverlay
docs then 👍
from floating-ui.
I quickly discovered why I had added that CSS! It prevents layout shift in scenarios like these:
- A page goes from loading, where no scrollbar is present, to showing enough content that a scrollbar appears (see this example from Josh Comeau)
- You simply navigate from a page in your app that has no scrollbar (not much content), to another page in your app that does have a scrollbar (and now your nav, for example, shifts the width of the scrollbar)
So now I've added the CSS back, along with this little "fix" at the top of my Modal
component:
useEffect((): () => void => {
document.documentElement.style.overflowY = 'unset'
return (): void => {
document.documentElement.style.overflowY = 'scroll'
}
}, [])
from floating-ui.
Related Issues (20)
- isRTL function at floating-ui.dom.mjs:433:26 might cause forced reflow HOT 1
- TypeError: Cannot convert undefined or null to object after updating @floating-ui/utils to 0.2.6 HOT 2
- Root menu focus moves when press the `Home` or `End` keys in an opened submenus.(using virtual nested dropdownMenu) HOT 2
- [React-Native Android] : On switching between two spotlight targets, the floating dialog is initially rendered in the position of previous target HOT 2
- useClick does not bind event listeners to external reference, while useHover does HOT 3
- While the `modal={true}` & `initialFocus={-1}` - the `Tab` focuses on the last tabbable element within the `floating` HOT 1
- `size` with `shift` doesn't fill the viewport when resizing HOT 2
- `blockPointerEvents` applies stray `pointer-events: none` to other documents/`<body>` HOT 2
- flip with `boundary` gets clipped when it can't fit within `rootBoundary` HOT 5
- isPositioned only becomes true after setting the open option to false HOT 8
- `useHover` + `useFocus` not working well together HOT 1
- `useHover` + `useFocus` not working well together HOT 2
- `size` placed before `shift` has inconsistent non-zero size when shifting HOT 2
- FloatingFocusManager incorrect focus restore when the the reference unmounts before the floating element is closed HOT 1
- After closing the submenu, pressing the `Enter` key selects an item within the submenu.(using virtual nested dropdownMenu) HOT 1
- Why is there a calculation error, a content calculation error, when the width on the right side is insufficient. HOT 3
- The location of the popup is off if body-element is zoomed HOT 4
- useTransitionStatus - open duration not applied HOT 2
- [FocusManager] ReturnFocus is bad with autoFocus inside floating element when no reference HOT 3
- Passing `undefined` for `crossAxis` value in the `offset` middleware breaks the calculations HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from floating-ui.