The screen pushes to the right when the chat feature is opened on an iPhone only
We are rolling out a new chat feature for our sites. I work for an eCommerce company and I am tasked to maintain over 50 websites. We have started building the chat feature on our test site, https://testmage.cluster.helpmefence.com/store/. I have the task of designing it. The test site is the only place where the feature is activated. Only when engaged on an iPhone, when the bubble is clicked and the chat opens, it works, but when you click in the message box, the whole screen gets pushed to the right and stays that way until the browser refreshes. It pushes the messages, message box, and logo at the top to the right and renders it unusable. I can only debug this with Browser Stack because the same issue isn't present on the mobile simulator in chrome and any other browser.
When you go to the site, it's the bubble that says "Live Sales Chat" on the bottom right-hand side of the screen.
37 Replies
Make a minimal example of the issue and put it in a repl or codepen
Okay
I'm not sure what I'm doing wrong, but it won't show anything in the bottom pane. There aren't any alerts.
https://codepen.io/LynSmithDFSuuply/pen/XWBXOLm I revised it and there are no errors now.
The same thing doesn't happen in code pen. IT IS ONLY WHEN IN BROWSER STACK OR ON AN IPHONE, no other places. So you cannot simulate it in CodePen.
mmmm yea I was going to say 😄
I can only assume it has to do with its relative parent, and or if you are using viewport units (but it looked like it was all %)
I have tried all the options.
When in a fixed position, I thought the relative parent doesn't matter
I didn't see fixed on it
but yes, correct the fixed parent is the veiwport
The wrap is in a fixed position.
I have a container, and then a wrap. What should the container be set at?
o wow yea sorry there was lots to unpack I stopped scrolling at the keyframes
you do have dvh on it too
Yes
I would remove that probably
The dvh?
dvw sorry
On the wrap?
on all of it >.>;;
What do the special characters represent in your message?
shifty eyes with sweat
cause I know I'm telling you something you probably don't wanna hear lol
hahahaha
😄
I will take any help I can get
I'm a big believer on let your content determine width/height
now the dvh for the wrap you will probably need or you will have to do the 100% way, just know dvh is really new and older safari will not support it
Yes, I agree, but it wasn't working so I tried all options.
Yes, I am aware of that
Still doing it after removing all the DVW's from the file
yea I'm still digging lots of css xD
Our master css file has over 29k lines in it. Lucky this feature isn't using that css, lol.
Maybe try making the main parent fixed and remove it from the wrap
Okay, I'll try that now.
chat-container
cause you are pulling the wrap out of it and first-wrap
not sure what first wrap is even doing 😄
Disregard the first wrap. I need to remove that.
ahaha np
Right, I know.
I think you might be on to something. I have to play with it. I will let you know shortly.
good luck! let me know your findings
It magnifies the screen when the message box is clicked. What causes that?
I think that magnification is causing the problems
I'm about to head home for the day. I will be back in tomorrow at 8am est. Thank you for your time and your help today. It's greatly appreciated.
The problem is not fixed, however, I am on a path now. Before I was wondering in the woods with no path. I'm a front-end developing intern for my company, so I am learning.
Sounds good have a good day. Glad you are not wondering as much now 😄
It all makes sense to me now....🎶
I think the solution lies in a calc function for the width