Botframework-webchat: Scroll Issue on Firefox

[dalvirsaini]

I am facing scroll issue on Firefox and mobile. here i shared screen shot of chrome and Firefox. for chrome its fine but for Firefox its not working.

Here is example of Chrome. here scroll is working:

Here is Example of Firefox where scroll not working

Thanks

[corinagum]

Hi @dalvirsaini, looking at your screencaps, it looks like the issue you are reporting is the lack of scrollbar in the second one. Is this correct? I tested our Mock Bot on Firefox (v65) just now and didn't see the same issue.

I have a few questions, if anyone who is repro-ing this issue could add their information that would be great.

1. It looks like this is v4 of Web Chat, is that correct? Are you using the CDN or NPM package?
2. What version of Firefox are you using?
3. Is your bot share-able to the public where I can take a quick look?
4. Does the scrollbar never appear? Or disappear after a particular action?
5. It doesn't look like you've added any styling modifications to the scrollbar, is this correct?
6. Does this issue occur when you test out Mock Bot? Please use this link to test: https://microsoft.github.io/BotFramework-WebChat/06.a.cognitive-services-bing-speech-js/

[keshavnagpal]

Hi @corinagum , I am facing a scrolling issue. where i try to scroll up, it is not letting me and automatically scrolling at the bottom of the chat.

Yes, it occurs on Mock Bot as well https://microsoft.github.io/BotFramework-WebChat/06.a.cognitive-services-bing-speech-js/
This keeps occurring on touch screen laptops/pc
when i move the same window to a non-touch monitor it works fine.

I'm using master/webchat-es5.js
it works fine in IE11 but not on Chrome
Please inform me when this is fixed.
Thanks

[corinagum]

@compulim I don't have a touch screen laptop, could you investigate this?

[nicholasamiller]

I am also seeing this issue, with Chrome, with MockBot, using this:

https://microsoft.github.io/BotFramework-WebChat/06.a.cognitive-services-bing-speech-js/

See vid:

https://1drv.ms/u/s!AqLTBxPBk_dXhux7ksIgD45D6LDu-g

Not touch screen.

I am also seeing the issue in my customised WebChat.

 "dependencies": {
    "adaptivecards": "1.0.0",
    "babel-runtime": "^6.26.0",
    "botframework-webchat": "4.2.0",
    "memoize-one": "^4.0.2",
    "react": "^16.6.0",
    "react-dom": "^16.6.0",
    "react-scripts": "^2.1.3"
  },

Is there some dependency I should revert to avoid this?

[keshavnagpal]

Thanks @nicholasamiller for posting the video
I'm seeing exactly same issue.

[corinagum]

@nicholasamiller Thank you very much! Let me look into this and get back to you guys.

[compulim]

Looking into this too. The bug looks very legit. But I am struggling trying to repro.

Trying combination of a few things:

• Windows
• Firefox
• Hi-DPI on/off
• Zoom ratio 100% vs 150%
• Mouse dragging scroll handler

Will be great if someone can give me some tips.

FYI, technically, the scroll component look at "onScroll" event. If it see an "onScroll" event, it will stop "sticky to bottom". In this mode, it will wait for 100ms and check if it is at the bottom. If yes, it will stick to bottom, otherwise, it will check again after 100ms.

[compulim]

I kind of understand the problem.

Technically speaking:

• "scroll to bottom" means, "if I am sticky, and I am not at the bottom, scroll to bottom"
• "I am no longer sticky" means,
  
  
  
  • "scroll event emitted due to user gesture, and the scrollTop value is no longer at bottom"
  
  
• "I become sticky" means,
  
  
  
  • "scroll event emitted, scrollTop value changed to the bottom value"
  
  

We prefer this behavior because we allow the content to be expanded, without using any hints from HTML DOM. We tried alternative approach in 4.2, which we explicitly tell the scrollable panel we have expanded, but the UX doesn't go well (sometimes Web Chat don't scroll to bottom).

When the user scroll to top, the following things will happen:

1. scrollTop set to 0
2. Fire scroll event

For every 150ms, we check if we are at the bottom. If no and we are sticky, we will scroll to bottom.

But in Firefox, the check is being inserted between 1 and 2. That means, the check will see "I am not at the bottom, but I am still sticky, I need to scroll to bottom." Thus, we are seeing this behavior.

[nicholasamiller]

Also in Chrome - see my vid.

On Wed., 13 Feb. 2019, 11:46 William Wong <[email protected] wrote:

I kind of understand the problem.

Technically speaking:

• "scroll to bottom" means, "if I am sticky, and I am not at the
  bottom, scroll to bottom"
• "I am no longer sticky" means,
  
  
  
  • "scroll event emitted due to user gesture, and the scrollTop
    
    value is no longer at bottom"
  
  
• "I become sticky" means,
  
  
  
  • "scroll event emitted, scrollTop value changed to the bottom
    
    value"
  
  

We prefer this behavior because we allow the content to be expanded,
without using any hints from HTML DOM. We tried alternative approach in
4.2, which we explicitly tell the scrollable panel we have expanded, but
the UX doesn't go well (sometimes Web Chat don't scroll to bottom).

When the user scroll to top, the following things will happen:

1. scrollTop set to 0
2. Fire scroll event

For every 150ms, we check if we are at the bottom. If no and we are
sticky, we will scroll to bottom.

But in Firefox, the check is being inserted between 1 and 2. That means,
the check will see "I am not at the bottom, but I am still sticky, I need
to scroll to bottom." Thus, we are seeing this behavior.

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/Microsoft/BotFramework-WebChat/issues/1697#issuecomment-463006121,
or mute the thread
https://github.com/notifications/unsubscribe-auth/ATrTcA5VdaBzIBpIqg0qA9zqqc4YmoCPks5vM2BXgaJpZM4ai_bt
.

[compulim]

Need some community help here because I cannot reliably repro on my box (repro chance = 1-in-50). I don't know if my fix really works or not.

@dalvirsaini @keshavnagpal @nicholasamiller could you guys help me by trying out the following pages?

• https://webchattest.blob.core.windows.net/scroll-test/index.html should have the fix
• https://webchattest.blob.core.windows.net/scroll-test/repro.html should _not_ have the fix (control experiment)

After you land on the page, type help and it should have enough content that requires scrolling.

Many thanks!

[keshavnagpal]

@compulim
I tried your solution in Chrome it seems to work on my machine
and i was able to reproduce the issue several times in the same machine on repro.html

I went ahead and copied your webchat.js file and used in my solution, it fixed the issue
(although when trying to scroll while new messages are coming it's not as smooth)

I need to use webchat-es5.js
Can you try the same fix in webchat-es5 as well?

Thanks