Sticky in Scrolling Modal doesn't work properly in Chrome !

[kien8995]

Steps

1. Create a Scrolling Modal
2. Add a Sticky

Expected Result

Some parts stick to top of the viewport when scrolling down

Actual Result

Nothing sticks

Version

0.72.0

Testcase

https://codepen.io/kien8995/pen/bryyNL
(Testcase work well in Safari, but stuck in Chrome)

[layershifter]

Initial problem

Sticky requires domNode as the context, while Modal will return a component object. This will be solved #1879. Solution: capture contextRef from div.

fixed/scrollContext

My initial view says me that problem with Sticky comes from Modal's positioning, because it's fixed. Needs more inverstigation.

[layershifter]

I've investigated problem and it looks rather complex while the value of the solution is very meager.

scrollContext

As Modal has classes that have fixed/static position, it should has another scrollContext. The valid will be parent Dimmer of Modal, the easiest way to get it is by CSS selector:

handleContextRef = (contextRef) => {
  const scrollContext = contextRef.closest('.dimmer')

  this.setState({ contextRef, scrollContext });
}

context

And there it become monstrous. Current implementation relies on the getBoundingClientRect() method, but as context is inside the fixed element, values are incorrect. I don't know any elegant and performant solution for this case. I've tested react-sticky, but it has same issues. BTW, SUI has same problem, Semantic-Org/Semantic-UI#4047.

---

I close this issue as it's not critical for core team. However, we're open for contributions and I will be glad to review PR that fixes this.