prosemirror/website
1
0
Fork 0
Code Issues 4 Pull requests Activity

scrollMargin and scrollThreshold not working on IOS #137

New issue
Open
opened 2020-11-23 17:00:31 +01:00 by DenysPoliarush · 1 comment
DenysPoliarush commented 2020-11-23 17:00:31 +01:00 (Migrated from github.com)
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!

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](https://user-images.githubusercontent.com/66991536/99981888-93153000-2db2-11eb-8d6a-bba9cddf92d3.gif) Android ![android](https://user-images.githubusercontent.com/66991536/99981809-87c20480-2db2-11eb-95c6-ed0933f37f3b.gif) Can you fix it? Thanks!
marijnh commented 2020-12-02 11:21:09 +01:00 (Migrated from github.com)
Copy link

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.

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 in to join this conversation.
No Branch/Tag specified
Branches Tags
main
repro583
No results found.
Labels
Clear labels
No items
No labels
Milestone
Clear milestone
No items
No milestone
Projects
Clear projects
No items
No project
Assignees
Clear assignees
No assignees
1 participant
Notifications
Due date
The due date is invalid or out of range. Please use the format "yyyy-mm-dd".

No due date set.

Dependencies

No dependencies set.

Reference
prosemirror/website#137
No description provided.