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.

Sign up for GitHub

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

Jump to bottom

Typing a multi-line message makes chat scroll up (then you have to scroll to see new messages) #3763

Closed
2 tasks
WofWca opened this issue Apr 9, 2024 · 2 comments · Fixed by #4119
Closed
2 tasks

Typing a multi-line message makes chat scroll up (then you have to scroll to see new messages) #3763

WofWca opened this issue Apr 9, 2024 · 2 comments · Fixed by #4119
Assignees
@WofWca
Labels
bug Something isn't working ui/ux UI/UX related issues

Comments

@WofWca
Copy link
Collaborator

WofWca commented Apr 9, 2024 •
edited
Loading

  • Operating System (Linux/Mac/Windows/iOS/Android): Windows

  • Delta Chat Version: 1.44.0

  • Expected behavior: The last message stays visible

  • Actual behavior: The chat scrolls up a little and the last message is obstructed. If new messages arrive, they are also obstructed.

  • Steps to reproduce the problem:

  • Screenshots:

    ShareX_d0v9X0VFxQ.mp4

  • Logs: none

On the video I've caught a rare case where this doesn't happen for a few lines, but then it starts happening again.
Update: see #3763 (comment).
I always found it about the most annoying thing about Delta Chat Desktop.

  • This thing also happens when you quote a message.
  • And when you resize the window down.

Workaround: keep pressing "Page Down" while you're writing your message.

Related:
@WofWca WofWca added ui/ux UI/UX related issues bug Something isn't working labels Apr 9, 2024
@missytake
Copy link
Contributor

Oh thanks this is annoying me so much, I tried to report it once, but then when I failed to reproduce it on purpose

@WofWca WofWca self-assigned this Jul 19, 2024
@WofWca
Copy link
Collaborator Author

WofWca commented Jul 19, 2024

Ok, a few discoveries. I wrote this test simple bench:

HTML 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body style="height: 100vh; display: flex; flex-direction: column; margin: 0;">
    <section style="overflow-y: auto; flex-grow: 1;
        max-width: 100%;">
        <ol style="margin: 0;">
            <li>sample message</li>
            <li>sample message</li>
            <li>sample message</li>
            <li>sample message</li>
            <li>sample message</li>
            <li>sample message</li>
            <li>sample message</li>
            <li>sample message</li>
            <li>sample message</li>
            <li>sample message</li>
            <li>sample message</li>
            <li>sample message</li>
            <li>sample message</li>
            <li>sample message</li>
            <li>sample message</li>
            <li>sample message</li>
            <li>sample message</li>
            <li>sample message</li>
            <li>sample message</li>
            <li>sample message</li>
            <li>sample message</li>
            <li>sample message</li>
            <li>sample message</li>
            <li>sample message</li>
            <li>sample message</li>
            <li>sample message</li>
            <li>sample message</li>
            <li>sample message</li>
            <li>sample message</li>
            <li>sample message</li>
            <li>sample message</li>
            <li>sample message</li>
            <li>sample message</li>
            <li>sample message</li>
            <li>sample message</li>
            <li>sample message</li>
            <li>sample message</li>
            <li>sample message</li>
            <li>sample message</li>
            <li>sample message</li>
            <li>sample message</li>
            <li>sample message</li>
            <li>sample message</li>
            <li>sample message</li>
            <li>sample message</li>
            <li>sample message</li>
            <li>sample message</li>
            <li>sample message</li>
            <li>sample message</li>
            <li>sample message</li>
            <li>sample message</li>
            <li>sample message</li>
            <li>sample message</li>
            <li>sample message</li>
            <li>sample message</li>
            <li>sample message</li>
            <li>sample message</li>
            <li>sample message</li>
            <li>sample message</li>
            <li>sample message</li>
            <li>sample message</li>
            <li>sample message</li>
            <li>sample message</li>
            <li>sample message</li>
            <li>sample message</li>
            <li>sample message</li>
            <li>sample message</li>
            <li>sample message</li>
            <li>sample message</li>
            <li>sample message</li>
            <li>sample message</li>
            <li>sample message</li>
            <li>sample message</li>
            <li>sample message</li>
            <li>sample message</li>
            <li>sample message</li>
            <li>sample message</li>
            <li>sample message</li>
            <li>sample message</li>
            <li>sample message</li>
        </ol>
    </section>
    <section>
        <textarea style="height: 10px"></textarea>
    </section>

    <!-- <style>
        ol > *:not(:last-child) {
            overflow-anchor: none;
        }
    </style> -->
</body>
</html>

And the issue is also present there, so I suppose it's not something specific to Delta Chat.

What I found is sometimes the message list stays scrolled down under specific circumstances:

  1. Reload the page
  2. Expand the <textarea> up. The last message will hide behind it (the issue).
  3. Scroll message list to the bottom.
  4. Shrink the textarea down.
  5. Expand the textarea up. The chat will keep being scrolled down up to the point where you resize the textarea to the biggest size it had in step 2.
scroll.bug.mp4

This looks Chromium-internal. This behavior is not reproducible on Firefox.
This is also why the issue looks not 100% reproducible.

I suppose a hacky solution would be to, on initial render

  1. expand the composer up
  2. scroll the chat to the bottom
  3. shrink the composer back to its normal size

I also looked at Signal code (which doesn't have this issue) and played around with it using dev tools (./Signal.exe --enable-dev-tools), and I found that if this element is removed from DOM, then the buggy behavior comes in.

This is where they use the element. They set newIsNearBottom = true if the element is visible and go from there, supposedly scrolling chat to bottom (but I didn't check further).
So they're taking a more thorough approach and not the hacky one that I mentioned above.

@WofWca WofWca removed their assignment Jul 19, 2024
@WofWca WofWca self-assigned this Sep 8, 2024
@WofWca WofWca mentioned this issue Sep 8, 2024
Closed
WofWca added a commit that referenced this issue Sep 9, 2024
@WofWca
WIP: fix chat not sticking scroll to bottom
8fcca39 
Closes #3753
Closes #3763

WIP because see #3753 (comment)

Uploading this purely for journaling purposes for now.
@WofWca WofWca mentioned this issue Sep 9, 2024
Closed
WofWca added a commit that referenced this issue Sep 10, 2024
@WofWca
fix: new messages not getting scrolled into view
1dd18bf 
...when typing a multi-line message, quoting a message,
or adding an attachment, because that would cause the chat
to "scroll up" due to its resize.

Closes #3763
This was referenced Sep 10, 2024
Merged
Merged
WofWca added a commit that referenced this issue Sep 11, 2024
@WofWca
fix: new messages not getting scrolled into view
012147b 
...when typing a multi-line message, quoting a message,
or adding an attachment, because that would cause the chat
to "scroll up" due to its resize.

Closes #3763
WofWca added a commit that referenced this issue Sep 11, 2024
@WofWca
fix: new messages not getting scrolled into view
6ba8685 
...when typing a multi-line message, quoting a message,
or adding an attachment, because that would cause the chat
to "scroll up" due to its resize.

Closes #3763
WofWca added a commit that referenced this issue Sep 11, 2024
@WofWca
fix: new messages not getting scrolled into view
df49e9d 
...when typing a multi-line message, quoting a message,
or adding an attachment, because that would cause the chat
to "scroll up" due to its resize.

Closes #3763
WofWca added a commit that referenced this issue Sep 30, 2024
@WofWca
fix: new messages not getting scrolled into view
8f49482 
...when typing a multi-line message, quoting a message,
or adding an attachment, because that would cause the chat
to "scroll up" due to its resize.

Closes #3763
@WofWca WofWca closed this as completed in 3f55784 Sep 30, 2024
@WofWca WofWca mentioned this issue Oct 17, 2024
Merged
3 tasks
@WofWca WofWca mentioned this issue Nov 13, 2024
Open
9 tasks
WofWca added a commit that referenced this issue Nov 22, 2024
@WofWca
improvement: scroll to new messages smoothly
e329e4f 
Though this seems to cause the chat to "scroll up" on its own
from time to time, resulting in behavior observed e.g. in
- #4186
- #3763
- #3753

Let's do some testing and see if this should be reverted.
WofWca added a commit that referenced this issue Nov 22, 2024
@WofWca
improvement: scroll to new messages smoothly
2ce7de9 
Though this seems to cause the chat to "scroll up" on its own
from time to time, resulting in behavior observed e.g. in
- #4186
- #3763
- #3753

Let's do some testing and see if this should be reverted.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@WofWca WofWca

Labels
bug Something isn't working ui/ux UI/UX related issues
Projects
None yet
Milestone
No milestone
2 participants
@WofWca @missytake