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

scrollMargin and scrollThreshold not working on IOS #137

Open
DenysPoliarush opened this issue Nov 23, 2020 · 1 comment
Open

scrollMargin and scrollThreshold not working on IOS #137

DenysPoliarush opened this issue Nov 23, 2020 · 1 comment

Comments

@DenysPoliarush
Copy link

Hello guys. First of all, thanks for your work.

I am building an application where I am using the Tiptap editor witch based on the Prosemirror editor. I have a floating menu that is under the cursor and I want it to always be shown above the keyboard on mobile devices and not hide under it. So I used scrollMargin and scrollThreshold.

  scrollMargin: { bottom: 80px }, 
  scrollThreshold:  { bottom: 80px }

And it works well when pressing enter, arrow up and arrow down keys on desktop, or enter key on android. But doesn't work at all on iOS.

Expected behavior:
When pressing Enter, the cursor should be 80px above the keyboard

Here are examples:

IOS
IOS

Android
android

Can you fix it? Thanks!

@marijnh
Copy link
Member

marijnh commented Dec 2, 2020

I looked into this and it appears that Mobile Safari just reports the entire document size for innerHeight, so ProseMirror's scrolling code doesn't really know how large the actual viewport is. I searched the web a bit but didn't find an obvious workaround for that. Thus, while the native scrolling-into-view works, ProseMirror's own logic, which takes the scrollMargin into account, is pretty much disabled.

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

No branches or pull requests

2 participants