Modal: rounding error causing "scrolling" className not to be applied

[lifehackett]

Steps

Mount a modal to the body. Note, this doesn't happen for all modals in all contexts so I'm not 100% sure of the steps to reproduce

Expected Result

The modal will fill the entire screen

Actual Result

At certain heights the calculation to apply the scrolling classname is off by a few decimal points causing the classname not to get applied. This means the inline style of margin-top get applied causing the modal to shift upwards.

Version

"semantic-ui-react": "0.71.0"

Testcase

https://gfycat.com/gifs/detail/HarmoniousImpureBoar
(Hmmm, first time submitting a video. Didn't turn out as well as I had hoped. Let me know if you'd like me to try again. Basically it is just showing the effect on the screen and the rounding issue I mentioned)

My understanding is that getBoundingClientRect returns the actual rendered height down to the decimal whereas innerHeight returns the height rounded to the nearest integer. What do you think about switching the implementation to either (at least for the conditional application of scrolling) to avoid the rounding issue.

1. this.ref.clientHeight >= window.innerHeight
2. Math.round(height) >= window.innerHeight

Are there any known CSS workarounds that I can apply to the Modal content to avoid this issue?

Thanks,
Conor

[levithomason]

Good call. A PR solving the issue is highly welcome!

[jmknoll]

@lifehackett Can you please elaborate on the issue and the steps that you took to cause it to occur?

If I understand correctly, the scrolling class is sometimes not being applied, and this causes the modal content to shift upward and also makes the modal un-scrollable, correct?

What steps can I take to replicate the issue? I'm getting the scrolling class applied consistently at all screen sizes.

[jegaxd26]

@jmknoll It occurs to me that this behaviour is true in the scrolling modal example https://react.semantic-ui.com/modules/modal . The first time you open it it is scrollable. If you close it and open it again, it is no longer scrollable.

[levithomason]

tip: you can link directly to examples with the link icon:

https://react.semantic-ui.com/modules/modal#modal-example-scrolling

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed in 30 days if no further activity occurs. Thank you for your contributions.