The transcript randomly loses stickiness to bottom when browser is zoomed out

[mihaiManea89]

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?

1. Navigate to https://microsoft.github.io/BotFramework-WebChat/06.recomposing-ui/a.minimizable-web-chat/
2. Zoom in browser
3. Type "card bingsports" in the send box
4. Wait for the bot to answer.
5. 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]

@mihaiManea89 - Please try the proposed solution mentioned here. Let me know if this works for you.

[mihaiManea89]

@stevkan - Nope, that didn't help. I also added a watch for "document.activeElement" in chrome devTools and the sendBox never loses focus.

[stevkan]

@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?

[mihaiManea89]

@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.