nextcloud / spreed

🗨️ Nextcloud Talk – chat, video & audio calls for Nextcloud
https://nextcloud.com/talk
GNU Affero General Public License v3.0
1.64k stars 437 forks source link

Chat doesn't properly scroll down to the last message #10627

Open urbenlegend opened 1 year ago

urbenlegend commented 1 year ago

How to use GitHub


Steps to reproduce

  1. Start a 1:1 chat
  2. Fill convo so that it starts scrolling
  3. Click refresh and select the chat again

Expected behaviour

Chat should be scrolled to the very last message sent or received.

Actual behaviour

Chat is scrolled to some arbitrary point 2-3 inches above the last message.

Talk app

Talk app version: 17.1.1

Custom Signaling server configured: No

Custom TURN server configured: No

Custom STUN server configured: No

Browser

Microphone available: Yes

Camera available: Yes

Operating system: Arch Linux

Browser name: Firefox and Chrome

Browser version: Firefox 118.0.1 and Chromium 117.0.5938.132

Browser log

``` setVisualLastReadMessageId token=qo42gp6h id=1397 MessagesList.vue:854 The request has been canceled Object { stack: message: "canceled", name: "CanceledError", code: "ERR_CANCELED" } MessagesList.vue:711 InstallTrigger is deprecated and will be removed in the future. constants.js:50:14 Content-Security-Policy: The page’s settings blocked the loading of a resource at inline (“script-src”). 2 content-script.js:40:65 Ignoring handleScroll as the messages history is empty MessagesList.vue:755 Joined signaling.js:235:10 Scrolling to a focused message programmatically MessagesList.vue:1020 Scrolling to a focused message programmatically MessagesList.vue:1020 undefined lockdown-install.js:1:93966 ```

Server configuration

Operating system: Arch Linux

Web server: Apache

Database: Maria

PHP version: 8.2.10

Nextcloud Version: 27.1.0.7

List of activated apps:

``` - activity: 2.19.0 - admin_audit: 1.17.0 - calendar: 4.5.1 - circles: 27.0.1 - cloud_federation_api: 1.10.0 - comments: 1.17.0 - contacts: 5.4.2 - contactsinteraction: 1.8.0 - dashboard: 7.7.0 - dav: 1.27.0 - deck: 1.11.0 - federatedfilesharing: 1.17.0 - federation: 1.17.0 - files: 1.22.0 - files_pdfviewer: 2.8.0 - files_reminders: 1.0.0 - files_rightclick: 1.6.0 - files_sharing: 1.19.0 - files_trashbin: 1.17.0 - files_versions: 1.20.0 - firstrunwizard: 2.16.0 - logreader: 2.12.0 - lookup_server_connector: 1.15.0 - mail: 3.4.0 - nextcloud_announcements: 1.16.0 - notifications: 2.15.0 - oauth2: 1.15.1 - password_policy: 1.17.0 - photos: 2.3.0 - privacy: 1.11.0 - provisioning_api: 1.17.0 - recommendations: 1.6.0 - related_resources: 1.2.0 - richdocuments: 8.2.0 - richdocumentscode: 23.5.402 - serverinfo: 1.17.0 - settings: 1.9.0 - sharebymail: 1.17.0 - spreed: 17.1.1 - support: 1.10.0 - survey_client: 1.15.0 - suspicious_login: 5.0.0 - systemtags: 1.17.0 - text: 3.8.0 - theming: 2.2.0 - twofactor_backupcodes: 1.16.0 - twofactor_totp: 9.0.0 - updatenotification: 1.17.0 - user_status: 1.7.0 - viewer: 2.1.0 - weather_status: 1.7.0 - workflowengine: 2.9.0 ```

Nextcloud configuration:

``` { "system": { "htaccess.RewriteBase": "\/", "memcache.local": "\\OC\\Memcache\\APCu", "apps_paths": [ { "path": "\/var\/www\/html\/apps", "url": "\/apps", "writable": false }, { "path": "\/var\/www\/html\/custom_apps", "url": "\/custom_apps", "writable": true } ], "instanceid": "***REMOVED SENSITIVE VALUE***", "passwordsalt": "***REMOVED SENSITIVE VALUE***", "secret": "***REMOVED SENSITIVE VALUE***", "trusted_domains": [ "" ], "trusted_proxies": "***REMOVED SENSITIVE VALUE***", "datadirectory": "***REMOVED SENSITIVE VALUE***", "dbtype": "mysql", "version": "27.1.1.0", "overwrite.cli.url": "", "overwriteprotocol": "https", "dbname": "***REMOVED SENSITIVE VALUE***", "dbhost": "***REMOVED SENSITIVE VALUE***", "dbport": "", "dbtableprefix": "oc_", "mysql.utf8mb4": true, "dbuser": "***REMOVED SENSITIVE VALUE***", "dbpassword": "***REMOVED SENSITIVE VALUE***", "installed": true, "mail_smtpmode": "smtp", "mail_smtphost": "***REMOVED SENSITIVE VALUE***", "mail_sendmailmode": "smtp", "mail_from_address": "***REMOVED SENSITIVE VALUE***", "mail_domain": "***REMOVED SENSITIVE VALUE***", "mail_smtpsecure": "tls", "mail_smtpauthtype": "LOGIN", "mail_smtpauth": 1, "mail_smtpport": "587", "mail_smtpname": "***REMOVED SENSITIVE VALUE***", "mail_smtppassword": "***REMOVED SENSITIVE VALUE***", "maintenance": false, "app_install_overwrite": [ "bruteforcesettings", "richdocumentscode" ], "loglevel": 2, "memcache.distributed": "\\OC\\Memcache\\Redis", "memcache.locking": "\\OC\\Memcache\\Redis", "redis": { "host": "***REMOVED SENSITIVE VALUE***", "password": "***REMOVED SENSITIVE VALUE***", "port": 6379 }, "default_phone_region": "US", "theme": "" } } ```

Server log (data/nextcloud.log)

``` Insert your server log here ```
Antreesy commented 1 year ago

Hi! Thanks for reporting!

Could you provide some screenshots of your whole screen for better understanding? 2-3 inches doesn't sound precise to understand the problem

Note: Falsely triggered 'Unread messages" divider seems to create the shift ~40px: image

Same would be applied for media files, link previews and other objects, which are loaded asyncronously, and also increase a scrollHeight

urbenlegend commented 1 year ago

https://github.com/nextcloud/spreed/assets/241316/75e53bf4-e08c-412e-b4ca-dfadcc3e5923

Uploaded a screencast to better show the problem. On page refresh, clicking on any chat does not automatically scroll to the bottom of it, even if all messages were read before. Sometimes, the skip to bottom button doesn't appear in a chat even though it is not at the bottom. This happens most often when transitioning from one "non-bottom" chat to another "non-bottom" chat.

After experiencing the bug, going back into that chat correctly scrolls down to the bottom. It seems like this bug really likes to be triggered by a page refresh.

urbenlegend commented 1 year ago

https://github.com/nextcloud/spreed/assets/241316/86cb0597-604f-4975-b9fd-b5954f46e46b

Whoops, forgot the web doesn't support H.265. Here's the video in the correct format.

urbenlegend commented 11 months ago

Issue is still present with Nextcloud Talk 18. I saw a merge request that was closed, did a fix get merged?

urbenlegend commented 2 months ago

Just upgraded to Nextcloud Talk 20 and the scrolling is much better. However, there's still an issue with chat not scrolling all the way down when switching from another Nextcloud app to the Talk app. After opening Talk, the first click into a chat will not be scrolled all the way to the bottom. Clicking on another chat and then returning to the first chat will scroll all the way to the bottom.

This bug should be reopened to address this issue.

Antreesy commented 2 months ago

Reopening for the fresh triage. Thanks for sharing with us!

urbenlegend commented 2 months ago

Thanks @Antreesy!

Hmm, so another scrolling issue I found is that incoming messages don't seem to scroll properly. It almost seems like the "User is typing" message seems to mess up the scroll position and makes it seem like I haven't scrolled all the way to the bottom even though I have. Then when the incoming message comes in, the scroll doesn't move.

Do I need to clear all chat history in order for this bug fix to take into full effect?

urbenlegend commented 2 months ago

Yeah it seems like incoming messages is still completely broken, but outgoing messages with link previews seems to behave much better.

Antreesy commented 2 months ago

Link previews and widgets have a dynamic height we can't track, so they always affect scroll position on screen Chat history has nothing to do with it, as we're fetching messages every page reload and ease the list if it's reach 300+ messages in one chat.

As for incoming messages - there might be current tab state involved. If it's not an active tab (or hidden in background), we don't scroll the chat for each new message, assuming that user hasn't read them yet and can miss

urbenlegend commented 2 months ago

Link previews and widgets have a dynamic height we can't track, so they always affect scroll position on screen

So does this mean if link previews and widgets push the chat scroll away from the bottom, it will never go to the most recent message? How do other apps handle this?

Problem is, I miss a ton of messages this way. When chat doesn't scroll to the bottom when Talk is visible, it makes me think no new messages are there. It is also exhausting having to keep scrolling down even though you're actively talking in chat.

there might be current tab state involved.

I just tested with a buddy of mine and I made sure to keep Nextcloud talk active. Incoming messages still did not scroll properly down.

bgort commented 1 month ago

As for incoming messages - there might be current tab state involved. If it's not an active tab (or hidden in background), we don't scroll the chat for each new message, assuming that user hasn't read them yet and can miss

Problem is, I miss a ton of messages this way. When chat doesn't scroll to the bottom when Talk is visible, it makes me think no new messages are there. It is also exhausting having to keep scrolling down even though you're actively talking in chat.

Perhaps automatic scrolling/advancing to the latest message can be an option? We're missing messages frequently due to this, too. Unfortunately I don't have time to do a PR, but would be happy to contribute financially (bounty, etc.) if that's a possibility? We very much appreciate Nextcloud and what you do. Thanks very much.