microsoft
The transcript randomly loses stickiness to bottom when browser is zoomed out
Is it an issue related to Adaptive Cards?
No
Is this an accessibility issue?
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: Edge (latest), Browser: Chrome (latest)
Which area does this issue affect?
Chat history
What is the public URL for the website?
https://microsoft.github.io/BotFramework-WebChat/06.recomposing-ui/a.minimizable-web-chat/
Please describe the bug
The transcript randomly loses stickiness when browser is zoomed out (80%-90%). Looks like the issue is caused by the browser decreasing the font size and resulting in fractional pixel values; for example, the height of span elements inside activities timestamp is 16.25px.
Do you see any errors in console log?
[NO]
How to reproduce the issue?
- Navigate to https://microsoft.github.io/BotFramework-WebChat/06.recomposing-ui/a.minimizable-web-chat/
- Zoom in browser
- Type "card bingsports" in the send box
- Wait for the bot to answer.
- Repeat step 2. After 5-10 messages, the bug should reproduce.
What do you expect?
The chat to maintain stickiness.
What actually happened?
Stickiness to bottom is lost.
Do you have any screenshots or recordings to repro the issue?
Adaptive Card JSON
No response
Additional context
[BUG]
@stevkan - Nope, that didn't help. I also added a watch for "document.activeElement" in chrome devTools and the sendBox never loses focus.
@mihaiManea89 - Apologies for the extended delay. Unfortunately, this issue fell off my radar.
I just attempted a repro of this, again, and am unable to do so successfully. In other words, it appears to be working correctly. I believe that there has been a version release or two since you posted this issue which may have corrected this. Do you still encounter this when trying?
@stevkan Where did you try to repro? If you tried at the address specified in the bug description, maybe I wasn't specific enough: try zooming in at 75%-80%-90% or zooming out at 110%-125%. I can reproduce it from the first try at 80% zoom-in. The idea is that you need to send the message "card bingsports," wait for the response to load and then send "card bingsports" again. 10-15 tries should be enough; Basically, the chat should scroll to the bottom until randomly breaks.
Looking at the BF samples repo, the latest version was bumped. From my research, it seems that when you zoom in or zoom out, the browser adjusts the size of pixels proportionally, resulting in fractional sizes. The chat becomes confused by this and does not realize the "bottom is in". If I remember correctly, react-scroll-to-bottom npm library has to do with it.
@mihaiManea89 - I'm able to repro the issue now when zoomed at and around 80%. I was not able to repro when zoomed out at all. With no changes to implementation, not sure why I can (partially) repro now and not before. Regardless, flagging this for review.
@OEvgeny
I can repro this as well, seems something is wrong with calculations inside of react-scroll-to-bottom library
@OEvgeny If you find this helpful, I fixed the problem by patching the react-scroll-to-bottom package and setting NEAR_END_THRESHOLD to 1.51 instead of 1. However, it's more of a workaround.
managed to repro this issue in Chrome Dev Tools by selecting an emulated mobile device with non-integer DPR.
Below, an example of the config I used to achieve this:
