-
Notifications
You must be signed in to change notification settings - Fork 7
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Opening Livechat React widget resets CSS variables #40
Comments
I don't know if anyone will ever see this but my workaround ended up being this: Save CSS variables in a local ref:
Then inject them into the CSS with something like
|
Hello @creativiii 👋 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 |
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 No idea. I'll create a reproduction as soon as I have time! |
For ionic / Angular / CapacitorJs: in html add Events:
in ts:
|
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. |
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. |
I'm currently experiencing a problem with React's LiveChat widget, I hope someone can shed some light and possibly suggest a fix.
Our app currently runs in a native web view, which allows us to use React (HTML, JS and CSS) as a frontend for our native app.
When running the web view, iOS exposes CSS env() variables like
safe-area-inset-top
, which is a non-zero value in case the phone has a notch. This variable is used to define a safe area so that content isn't rendered behind the notch.This works pretty well except when we open the LiveChat widget, which seemingly sets all the values to 0.
How the App usually looks:
![Screenshot 2022-05-10 at 14 18 11](https://user-images.githubusercontent.com/23533178/167637590-da870317-25eb-4f3c-beb6-e6c81932c290.png)
How the chat looks when the LiveChat component is open:
![Screenshot 2022-05-10 at 14 22 23](https://user-images.githubusercontent.com/23533178/167638451-d40b63df-5bc4-448f-9ac7-57344093e1bd.png)
You can see the minimise button is being rendered behind the notch. And if I increase the padding of the iframe rendering he chat, I can take a peek behind to reveal the CSS variables setting the safe areas have been reset:
![Screenshot 2022-05-10 at 14 23 58](https://user-images.githubusercontent.com/23533178/167638751-9f3cc3df-5d2a-40a0-92cc-7c89df6248cf.png)
If I go look at my inspector, I can tell that
--safe-area-inset-top
(which I previously assigned toenv(safe-area-inset-top)
has been set to 0.The strange thing is that before opening LiveChat, I can see that
#chat-widget-container
actually has a non-zero value assigned to the variable, which is then set to 0 the moment I click on the button to open LiveChat.Our implementation is pretty standard:
Any idea how we can work around this issue?
The text was updated successfully, but these errors were encountered: