2 ms·

The most common solution used today is Popper, which essentially takes the relevant element out of the DOM and makes it a fixed element with transforms on body

The most common solution used today is Popper, which essentially takes the relevant element out of the DOM and makes it a fixed element with transforms on body (or any element of your choice) instead. It's used by many large projects such as react-select etc. This is an approach that wouldn't have worked well in the days of old due to delays in updating the UI, but modern browsers are very capable with it and there are no discernible issues with alignment. I agree however that native elements are way better wherever that's a valid option since they also have corresponding native elements on mobile devices etc.

chrismorgan 4y ago
I think you might have misunderstood the situation. Popper supports putting popper elements somewhere else in the DOM, but that’s not their general recommendation (https://popper.js.org/docs/v2/performance/#attaching-elements-to-the-dom https://popper.js.org/docs/v2/performance/#attaching-element...). React Aria puts its popups in such a separate place in the DOM like you’re saying. But the part I and the parent were remarking upon is what you do about scrolling. Popper’s (default) answer is “recalculate the preferred position [and size, I think?] on every scroll event”. This is perfectly fine, and sometimes preferable. React Aria’s answer is “position once and then prevent scrolling”. This matches all platforms’ conventions for these sorts of elements, it’s just that the way they’ve implemented it has problems, problems that may be unavoidable at present.
- Rapzid 4y ago
  Is it possible the doc page is just not laid out well and that's causing weird interactions with how the component tries to stop scrolling? I imagine it also tries to stop in the nearest scroll port, which just happens to be the root here. In any case I'm sure they will fix it if you open an issue against it..

chrismorgan 4y ago

I think you might have misunderstood the situation. Popper supports putting popper elements somewhere else in the DOM, but that’s not their general recommendation (https://popper.js.org/docs/v2/performance/#attaching-elements-to-the-dom https://popper.js.org/docs/v2/performance/#attaching-element...). React Aria puts its popups in such a separate place in the DOM like you’re saying. But the part I and the parent were remarking upon is what you do about scrolling. Popper’s (default) answer is “recalculate the preferred position [and size, I think?] on every scroll event”. This is perfectly fine, and sometimes preferable. React Aria’s answer is “position once and then prevent scrolling”. This matches all platforms’ conventions for these sorts of elements, it’s just that the way they’ve implemented it has problems, problems that may be unavoidable at present.

Rapzid 4y ago
Is it possible the doc page is just not laid out well and that's causing weird interactions with how the component tries to stop scrolling? I imagine it also tries to stop in the nearest scroll port, which just happens to be the root here. In any case I'm sure they will fix it if you open an issue against it..