toolbar scrolls away, mostly noticable on iOS #43

r10s commented 2023年08月12日 17:57:58 +02:00

extracted from #11

failed attempt to fix it #32

the whole toolbar probably needs to have classic, sticky CSS; currently, this is not the case afaik

extracted from https://codeberg.org/webxdc/editor/issues/11 failed attempt to fix it https://codeberg.org/webxdc/editor/pulls/32 the whole toolbar probably needs to have classic, sticky CSS; currently, this is not the case afaik

WofWca commented 2023年08月21日 13:13:40 +02:00

Someone said that position: sticky; works for them https://github.com/ProseMirror/prosemirror-menu/issues/3#issuecomment-482245327

Someone said that `position: sticky;` works for them https://github.com/ProseMirror/prosemirror-menu/issues/3#issuecomment-482245327

WofWca commented 2023年09月05日 18:37:05 +02:00

778c4a2378be5683b7f065db8c763e631b2675a2 also didn't solve the issue, it still gets scrolled away (thanks @r10s for testing).
It's literally height: 100vh and position: static, I don't know how it works.

778c4a2378be5683b7f065db8c763e631b2675a2 also didn't solve the issue, it still gets scrolled away (thanks @r10s for testing). It's literally `height: 100vh` and `position: static`, I don't know how it works.

r10s commented 2023年09月06日 10:37:22 +02:00

below is an example that shows what goes wrong.

it is not only that the toolbar scrolls away, partly, the cursor also goes out of view when hitting ENTER. and, as said, eg. it is very hard to mark a word to make it eg. "bold"

i think, the issue is that sticky is not used currently. there are lots of toolbars and non-scrolling areas on ios (see calendar and tons of other examples), it is not a general issue, prosemirror either does sth. wrong here or the current implementation is desired (i doubt that),

@WofWca however, it is fine to leave this issue open for now, this is hard to solve without an ios/safari; i or someone else with ios/safari should have a look at that

below is an example that shows what goes wrong. it is not only that the toolbar scrolls away, partly, the cursor also goes out of view when hitting ENTER. and, as said, eg. it is very hard to mark a word to make it eg. "bold" i think, the issue is that `sticky` is _not_ used currently. there are lots of toolbars and non-scrolling areas on ios (see calendar and tons of other examples), it is not a general issue, prosemirror either does sth. wrong here or the current implementation is desired (i doubt that), @WofWca however, it is fine to leave this issue open for now, this is hard to solve without an ios/safari; i or someone else with ios/safari should have a look at that

WofWca commented 2023年09月06日 10:42:03 +02:00

i think, the issue is that sticky is not used currently

We tried it in #32

And in 778c4a2378be5683b7f065db8c763e631b2675a2 it's even positioned statically

> i think, the issue is that sticky is not used currently We tried it in #32 And in 778c4a2378be5683b7f065db8c763e631b2675a2 it's even positioned statically

r10s commented 2023年09月06日 10:56:42 +02:00

yes, the issues seems to be trickier :)

yes, the issues seems to be trickier :)

r10s commented 2023年09月21日 16:37:13 +02:00

if one looks closely on desktop, when scrolling in a larger document, also there, the toolbar is moved up for a fraction of a second. it is then immediately corrected. but still, this is a bit weird and obviously error prone.

see the video attached and look at the toolbar on startup. it should just not move.

if one looks closely on **desktop**, when scrolling in a larger document, also there, the **toolbar is moved up for a fraction of a second.** it is then immediately corrected. but still, this is a bit weird and obviously error prone. see the video attached and look at the toolbar on startup. it should just not move.

hpk commented 2023年09月28日 11:26:54 +02:00

on desktop after window-resizing i definitely get weird toolbar behaviour (missing buttons etc.) which only heals when i click into the text-area.

on desktop after window-resizing i definitely get weird toolbar behaviour (missing buttons etc.) which only heals when i click into the text-area.

rtn commented 2023年09月28日 11:53:59 +02:00

Is it easily reproducible on any safari browser or does it have to be on iOS? E.g. would a normal Mac lappy work?

Is it easily reproducible on any safari browser or does it have to be on iOS? E.g. would a normal Mac lappy work?

treefit commented 2023年12月06日 22:25:16 +01:00

works in desktop mostly, but on iOS this issue is really annoying and prevents me from making headings in the bottom of my document.

we could probably change the layout to:

container (flex box flex-column or grid)
 menu bar
 document container (flex grow, overflow-y scroll)

this would avoid needing to deal with absolute/fixed/sticky position stuff.

works in desktop mostly, but on iOS this issue is really annoying and prevents me from making headings in the bottom of my document. we could probably change the layout to: ``` container (flex box flex-column or grid) menu bar document container (flex grow, overflow-y scroll) ``` this would avoid needing to deal with absolute/fixed/sticky position stuff.

WofWca commented 2023年12月07日 11:27:29 +01:00

I believe what you're talking about has been attempted in 778c4a2378be5683b7f065db8c763e631b2675a2

I believe what you're talking about has been attempted in 778c4a2378be5683b7f065db8c763e631b2675a2