dmitrizzle/chat-bubble

Chatbubble width issue

eokwara opened this issue · 5 comments

eokwara commented

Hi,
I am using your chatbubble. I notice that when I use it in a frame, the width of the say bubble reduces (see link https://ibb.co/kVn3Fdr ). I also notice that bubbleContent.offsetWidth in bubble.js for "say" is zero when i test it. This problem does not happen when running chat bubble outside of the frame and on a standalone. Can you assist me here? What do i need to adjust to fix this issue? Here is the link to screenshot: https://ibb.co/kVn3Fdr

dmitrizzle commented

Hey @eokwara can you provide the link for the application and share the info about the browser/system you're using? To be able to fix issues like this it's important to be able to reproduce the problem. Thanks!

eokwara commented

Thanks for the response. Below is the details:

  1. Website: http://34.76.34.12/demo4/test.html (Click on the button at the bottom right. To avoid conflicts with my code, i recreated the problem again but this time, using one of the chatbubble examples: chat.bubble.v2/chat.bubble.v2/1-basics.html)
  2. Browsers: Chrome, Microsoft Edge (I have attached screenshot for both browsers)

chrome
microsoft_edge

eokwara commented

Hi @dmitrizzle , I hope all is well. Were you able to resolve the issue?

dmitrizzle commented

Hi @dmitrizzle , I hope all is well. Were you able to resolve the issue?

Sorry, @eokwara , it's been a busy few weeks here.

It seems that the issue is with how you're embedding the chatbot. The chat-bubble script creates bubble dimension properties by analyzing how much space it has available. Your page animates the width that the iframe has available by changing it's style property rapidly. It seems that the script bot initializes at a time when your animation is still its early stages. It then makes the calculation for the available size, which, by the time the bot itself launches happens to be outdated.

I suggest you try these two things:

  • Delay loading chatbot script until your animation completes
  • Try using CSS-based animation, instead of rapidly changing style property with JavaScript.
dmitrizzle commented

Closing since this isn't an issue with the library, rather than implementation.