microsoft / microsoft/BotFramework-WebChat
Auto scroll broken with autoScrollSnapOnPage on Android devices
@compulim is already working on this.
Since Sep 6, 2022.
- Dominant language
- HTML
- Stars
- 1.8k
- Forks
- 1.6k
- Avg merge
- 22h 58m
- Merged PRs (30d)
- 2
Description
Is it an issue related to Adaptive Cards?
- Yes, this is an Adaptive Card issue but it is specific to Web Chat.
Do you have any screenshots?
No
What version of Web Chat are you using?
Latest production
Which distribution are you using Web Chat from?
NPM
Which hosting environment does this issue primarily affect?
Web apps
Which browsers and platforms do the issue happened?
Browser: Chrome (latest), Platform: Android
Which area does this issue affect?
Chat history
Is this an accessibility issue?
- Yes, this is an accessibility issue.
Please describe the bug
Auto scrolling the transcript is broken on Android devices running the Chrome browser with the autoScrollSnapOnPage style option set to true.
Do you see any errors in console log?
Uncaught TypeError: Cannot read properties of null (reading 'offsetTop')
at BasicTranscript.js:817:1
at Composer.js:309:1
at Composer.js:477:1
How to reproduce the issue?
- Start WebChat with
styleOptionsusing{ autoScrollSnapOnPage: true } - Open WebChat using the Chrome browser on an android device
- Type a message that will receive a response
What is the expected and actual behavior?
Expected:
Chat transcript scrolls down when an incoming message is received.
Actual:
Chat transcript does not scroll down to reveal the received message.
Adaptive Card JSON
No response
Additional context
Transcript activity snapping uses the class from the active descendant element to calculate scroll offset:
https://github.com/microsoft/BotFramework-WebChat/blob/v4.15.3/packages/component/src/BasicTranscript.tsx#L841
On Android devices the active descendent is not rendered because of an Android TalkBack bug workaround:
https://github.com/microsoft/BotFramework-WebChat/blob/v4.15.3/packages/component/src/Transcript/ActivityRow.tsx#L79
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Assessment
This issue has not been assessed yet.