Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Use requestAnimationFrame to position modal opening #514

Merged
merged 1 commit into from
Aug 14, 2019

Conversation

RobbieTheWagner
Copy link
Member

This helps to mitigate some of the glitchy scrolling where the modal overlay opening would visible jump around on scroll. It does not totally fix the problem, but is much better.

A possible way to improve things further would be to position with CSS transforms, rather than changing x and y.

This helps to mitigate some of the glitchy scrolling where the modal overlay opening would visible jump around on scroll. It does not totally fix the problem, but is much better.

A possible way to improve things further would be to position with CSS transforms, rather than changing x and y.
@RobbieTheWagner RobbieTheWagner merged commit 0bf0bf3 into master Aug 14, 2019
@RobbieTheWagner RobbieTheWagner deleted the raf-modal-opening branch August 14, 2019 14:50
@RobbieTheWagner
Copy link
Member Author

@dipiana This should have fixed things a good bit. I think the one improvement we could still make, is to just do getBoundingClientRect once, then instead of setting x and y over and over again, we should reposition with CSS transforms based on the scroll position or something. Something like https://codepen.io/rachsmith/post/how-to-move-elements-on-scroll-in-a-way-that-doesn-t-suck-too-bad

If you want to give it a try, let me know! Otherwise, I think we're in a lot better place after this PR.

@dipiana
Copy link

dipiana commented Aug 16, 2019

@rwwagner90, I am trying to understand the code at the moment, javascript is not my strength but let's see.
Could you please explain what "rafLoop" is for?

Thanks.

@RobbieTheWagner
Copy link
Member Author

@dipiana it's for requestAnimationFrame so it will run each time requestAnimationFrame runs. I wouldn't worry too much about it, I think performance is pretty decent now, unless you are noticing big problems?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants