Chat does not automatically scroll to the bottom on load

[OvidijusParsiunas]

Chat may not always automatically scroll to the very bottom on the initial render. This can happen when the chat is pre-populated with messages using initialMessages or introMessage.

Example code:

chatElementRef.initialMessages = [
    {text: 'asdasdasd'},
    {text: 'asdasdasd'},
    {text: 'asduasdiuhasdiuasdsa'},
    {text: 'asdiujasiuhdiuashduihasd'},
    {text: 'sadoijasiudasiudhsauidh'},
    {text: 'sadoijasiudasiudhsauidh'},
    {text: 'sadoijasiudasiudhsauidh'},
    {text: 'sadoijasiudasiudhsauidh'},
  ]

Result on initial render:

[OvidijusParsiunas]

Cause: Deep Chat uses the Inter, sans-serif, Avenir, Helvetica, Arial value for its default font-family property which it formats by adding the following head url to the DOM's header and download the font files: https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap

If the font files are downloaded later than the automatic initial scroll to the bottom is triggered, the formatted text size can have different dimensions, which in turn will change the chat height that is different to the scrolled dimensions.

How to prevent this: There are multiple ways to prevent this:

• Untick the Disable cache option in the Network tab in the Developer Console of your browser, which will automatically save the font files in the cache and have them ready on the initial Deep Chat render:

  

• Change Deep Chat's font-family to another font: style="font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif"

• Force scroll via the scrollToBottom method.