Incorrect chat window height in Safari after resize

[netandreus]

Describe the bug

When Safari window is resized chat content does not resized correctly.

Steps to reproduce

To reproduce we need to open Demo app https://antoine92190.github.io/vue-advanced-chat/ in Safari and try to resize browser window (change height).

Example:

1. Open Demo App in Safari.
2. Resize window height
3. Chat content does not resized properly. If we increase height - message typing area does not moving to the bottom. If we decrease height - message typing area does not moves upper.

Expected behavior

Here the same case in Google Chrome.

1. Open demo app

2. Decrease height

3. Increase height

Screenshots

Resize behaviour in Safari 15.3 (17612.4.9.1.8)

1. Open demo app

2. Decrease height

3. Increase height

Device (please complete the following information)

• OS: MacOS Monterey 12.2.1
• Browser: Safari 15.3 (17612.4.9.1.8)
• Package version: 2.0.3

[antoine92190]

Is the issue still appears if you reload the page after changing the height?

[netandreus]

@antoine92190 yes, I try to:

1. Open Demo app in Safari
2. Reduce height -> Message input area now is out of view (under the window).
3. Reload page -> All fine
4. Reduce height one more time.
5. Message input area now out of view again.

P.S. I think it is because of this line: https://github.com/antoine92190/vue-advanced-chat/blob/003c4671b3a2b3503a84e77ac2f07c945b84babb/demo/src/ChatContainer.vue#L164

May be 100vh does not correctly working in Safari? May be it should be caught resize event end recalculate height in Safari?

Possible fix

<template>
  <div>
    <vue-advanced-chat
        :height="getComponentHeight()"
        :current-user-id="currentUserId"
        :rooms="JSON.stringify(rooms)"
        :rooms-loaded="true"
        :messages="JSON.stringify(messages)"
        :messages-loaded="messagesLoaded"
        @send-message="sendMessage($event.detail[0])"
        @fetch-messages="fetchMessages($event.detail[0])"
    />
  </div>
</template>

<script setup lang="ts">
import { onMounted, onBeforeUnmount, ref, Ref, getCurrentInstance } from 'vue'
// @ts-ignore
import { register } from 'vue-advanced-chat'
register();

/**
 * Constants
 */
const instance = getCurrentInstance();

/**
 * Data
 */
let windowWidth: Ref<number> = ref(null);
let windowHeight: Ref<number> = ref(null);
let resizeEventListener: any = null;

/**
 * Events
 */
onMounted(async function() {
  // Initial dimensions
  windowWidth.value = document.documentElement.clientWidth;
  windowHeight.value = document.documentElement.clientHeight;

  // Resize handler
  if (isDesktopSafari()) {
    resizeEventListener = window.addEventListener('resize', onResize);
  }

});

onBeforeUnmount(async function() {
  if (resizeEventListener) {
    window.removeEventListener('resize', resizeEventListener);
  }
});

/**
 * Methods
 */
let getComponentHeight = function() {
  if (isDesktopSafari()) {
    return windowHeight.value + 'px';
  } else {
    return 'calc(100vh)';
  }
}

let isDesktopSafari = function(): boolean {
  //const isSafari = /^((?!chrome|android).)*safari/i.test(navigator.userAgent);
  const uA = navigator.userAgent;
  const vendor = navigator.vendor;
  return (/Safari/i.test(uA) && /Apple Computer/.test(vendor) && !/Mobi|Android/i.test(uA));
}

let onResize = function() {
  if (windowHeight.value != document.documentElement.clientHeight) {
    instance?.proxy?.$forceUpdate();
  }
  windowWidth.value = document.documentElement.clientWidth;
  windowHeight.value = document.documentElement.clientHeight;
}

Can you test and implement something like this in vie-advanced-chat?

[antoine92190]

That's a lot of code and maintenance for something that is not a common use case, and that can be fixed either by refreshing the browser, or by adding your code outside the library code as you did. Closing this unless a one liner solution is found.