Opening Livechat React widget resets CSS variables about chat-widget-adapters HOT 7 CLOSED

Thank you for the reply @walaszczykm!

The issue templates didn't pop-up when opening a new issue so I assumed there were none, sorry 😅

I had a look at the source and I couldn't find any code related to CSS variables either which was pretty strange. It could have something to do with the chat being rendered in an iframe, and the html within it overriding the CSS variables of the containing html tag?

No idea. I'll create a reproduction as soon as I have time!

from chat-widget-adapters.

Hello @creativiii 👋
Thanks for the report. Sad to hear you have encountered an issue with the library.

For the future, please use dedicated Issue templates as they provide questions for all necessary information we need for problem investigation. Also, they automatically assign our team, which notifies us about reports much quicker 🙂

In the case of safe-area-inset-top nowhere in our code, we are setting this value explicitly, nor we are affecting the host CSS variables. I wonder if the issue is not related to the native webview behavior itself, changing the safe-area-inset-top to 0 for maximized absolute content of Chat Widget. At the moment your workaround looks very solid. We will take a look if we can do something about it in a more pleasant way for you as an Application Developer 🙂

from chat-widget-adapters.

For ionic / Angular / CapacitorJs:

in html add Events:

<livechat-widget license="123456789" visibility="minimized" (onVisibilityChanged)="visiChange($event)"></livechat-widget>

in ts:

 visiChange(event: EventHandlerPayload<'onVisibilityChanged'>) {
    if (Capacitor.getPlatform() == 'ios') {
      if (event.visibility == 'minimized') {
        let a = document.getElementById('chat-widget-container') as HTMLElement;
        setTimeout(() => {
          let b = a.firstChild as HTMLElement;
          b.style.margin = "0";
        }, 500)
      }else{
        let a = document.getElementById('chat-widget-container') as HTMLElement;
        setTimeout(() => {
          let b = a.firstChild as HTMLElement;
          b.style.margin = "56px 0"
        }, 500)
      }
    }
  }

from chat-widget-adapters.

The issue comes directly from the native web view behavior, and we are not going to implement any web view-specific CSS style fixes atm. The proposed workaround #40 (comment) looks solid and can be easily used while embedding the Chat Widget into a native webview.

from chat-widget-adapters.

I don't know if anyone will ever see this but my workaround ended up being this:

Save CSS variables in a local ref:

  const safeAreaRef = useRef({
    top: getComputedStyle(document.documentElement).getPropertyValue(
      '--ion-safe-area-top'
    ),
    bottom: getComputedStyle(document.documentElement).getPropertyValue(
      '--ion-safe-area-bottom'
    ),
  });

Then inject them into the CSS with something like emotion:

import { css, Global } from '@emotion/react';

// ...

      <Global
        styles={css`
          #chat-widget-container iframe {
            padding-top: ${safeAreaRef.current.top} !important;
            padding-bottom: ${safeAreaRef.current.bottom} !important;
          }
        `}
      />

from chat-widget-adapters.

For ionic / Angular / CapacitorJs:

in html add Events:

<livechat-widget license="123456789" visibility="minimized" (onVisibilityChanged)="visiChange($event)"></livechat-widget>

in ts:

 visiChange(event: EventHandlerPayload<'onVisibilityChanged'>) {
    if (Capacitor.getPlatform() == 'ios') {
      if (event.visibility == 'minimized') {
        let a = document.getElementById('chat-widget-container') as HTMLElement;
        setTimeout(() => {
          let b = a.firstChild as HTMLElement;
          b.style.margin = "0";
        }, 500)
      }else{
        let a = document.getElementById('chat-widget-container') as HTMLElement;
        setTimeout(() => {
          let b = a.firstChild as HTMLElement;
          b.style.margin = "56px 0"
        }, 500)
      }
    }
  }

Careful with setting hardcoded margins, not all iPhone screens have notches, and the ones that don't are quite small!

from chat-widget-adapters.

For ionic / Angular / CapacitorJs:
in html add Events:
<livechat-widget license="123456789" visibility="minimized" (onVisibilityChanged)="visiChange($event)"></livechat-widget>
in ts:

 visiChange(event: EventHandlerPayload<'onVisibilityChanged'>) {
    if (Capacitor.getPlatform() == 'ios') {
      if (event.visibility == 'minimized') {
        let a = document.getElementById('chat-widget-container') as HTMLElement;
        setTimeout(() => {
          let b = a.firstChild as HTMLElement;
          b.style.margin = "0";
        }, 500)
      }else{
        let a = document.getElementById('chat-widget-container') as HTMLElement;
        setTimeout(() => {
          let b = a.firstChild as HTMLElement;
          b.style.margin = "56px 0"
        }, 500)
      }
    }
  }

Careful with setting hardcoded margins, not all iPhone screens have notches, and the ones that don't are quite small!

Yes i know. But my Targeted Devices are new. and i think all new devices have notches. But thanks for the tip.

from chat-widget-adapters.