Mobile view is far too zoomed in (Server — iPhone 6S iOS 14.3 odysseyn1x SMServer 0.7.1, client Samsung Galaxy S10e OneUI 2.5 Brave mobile browser)

[sabogalc]

Thank you for the mobile enhancements! The chat history view looks great. Unfortunately, entering a chat leaves it far too zoomed in, and some other things such as the compose new message box aren't in a good spot or view

[sabogalc]

Here is an issue with overlapping messages on an iPad in Safari and an iPhone in Brave respectively

[itsjunetime]

Wow uh yeah that is definitely not good; I'll look into that and should have it fixed by next update. I think it's due to the reactions; they seem to mess up vertical spacing.

[itsjunetime]

Alright, I think I've got this fixed up. It just required a single css rule, interestingly enough (.text-area { flex-shrink: 0 }); it'll be fixed in the next version.

[itsjunetime]

This issue should be fixed with version 0.7.2 -- could you try it out and let me know if you're still running into the same issues?

[sabogalc]

The second comment with the overlapping on iOS is all fixed! Unfortunately, the first issue with my S10e on Brave is still there (but I have more data on it). So the zoom only occurs in group chats, and its a different zoom on each group chat.

Here is a screenshot of an individual chat, and you can see that some of the text is distorted and blurry. These distortions dynamically move with the screen as I scroll. I will test other browsers on my S10e and let you know how it goes. Thank you for the new tab default by the way 👍

[sabogalc]

So one thing I noticed is that no matter which mobile Android browser was used, all individual chats are zoomed correctly, but all group chats start out zoomed correctly, then quickly zoom in to a (usually) unusable aspect ratio. FireFox was the only browser that allowed me to zoom out. Blurry text occured on all browsers except FireFox and Edge.

On Chrome the exact same thing happened as Brave, which is to be expected as Brave is based on Chromium.

FireFox was almost perfect, it still did zoom in on the group chat, but I was able to zoom out. Unfortunately, while all the other browsers made it appear as SMServer was made to run on my phone's aspect ratio, FireFox's aspect ratio made me feel like it was optimized for a tablet (small text, wide conversation body). I could zoom out to see about 95% of the conversation screen which was very nice. Also, no blurry text on FireFox.

Cake was a horrible experience, it was just about unusable. On top of the zoom in, the screen also constantly flickered black. On other devices (even desktops), I get occasional flickers while scrolling, but it usually isn't too noticeable or annoying. On Cake, however, they were all over the place, even when I wasn't touching the screen.

I assume the DuckDuckGo browser is also based on Chromium as I had the same results as Chrome and Brave.

Edge was surprisingly alright. I say surprisingly because I've considered Microsoft browsers a joke since IE7, but this reminded me to not judge a book by its cover. Edge zoomed in to the left side of the screen and didn't allow me to zoom out. However, the left side of the screen is where my friends' messages and the exit arrow are, so it's pretty good. Not perfect but compared to the other browsers it's an easy second. It beats FireFox in that the aspect ratio is appropriate for my phone, but FireFox wins overall because it can zoom out.

I didn't test Opera because a long time ago I read that they have shady practices, and I used ADB commands to remove all the Samsung bloatware from my phone, so I didn't want to reinstall Samsung Internet in case I had to run that uninstall command again. Overall, I guess the problem persists in all browsers (even though I could zoom out in FireFox, I couldn't zoom out all the way), but some handle it better than others. Chromium browsers do pretty poorly and I wish I hadn't even tested cake, but I hope these tests are helpful. Maybe other SMServer Android users can help test too?

[itsjunetime]

Man, I really appreciate all of this. I released this latest version after only having tested the mobile web interface on an apple device; don't know why I didn't verify it was working fine on an android as well. I also remembered I have an old google nexus phone sitting around, so I booted that up and am running into the same issues on its browser. This may be somewhat difficult to debug (since afaik I can't exactly open up inspect element on a mobile browser on android) but I'll definitely poke around more and figure out exactly why it's being like this.

Also this pixelation thing is just super weird -- what in the world makes random text appear super pixely? I've never run into anything like this before.

[sabogalc]

I was able to type in "view-source:" before my SMServer URL on my phone and get an inspect element like menu, let me know if this is helpful.
I attempted to do the mobile emulation on my laptop, but all that does is mimic the aspect ratio, and everything works fine on there.

[itsjunetime]

So I've been poking around with this a bit (apparently chrome has a remote debugging tool so that you can inspect webpages on devices connected via usb, so I've been using that with my old android phone), and I cannot for the life of me figure out what's causing it.

Random texts (not conforming to any pattern that I can discern) have significantly larger text (the size of which text also varies) than all other texts, even when removing all CSS attributes that affect these texts. Also, I'm still seeing it sometimes become pixely after scrolling for a bit, but I can't find anyone else on the internet who's run into this same thing, so I'm not quite certain how to go about trying to fix it. I'll keep this task updated if I find something more, though.

[sabogalc]

It seems like a "fix" for all these bugs (including #87) is to first go into SMServer in landscape mode, then switch to portrait. I've attached images of what it looks like when starting in portrait and switching to landscape, and vice versa.

[itsjunetime]

That may fix it, but it also brings it back into a regular desktop view, which I'd like to only show on desktop. However, I think I may have just found solutions to all the mobile issues -- both this and #87. It's just a bit of css & js:

text {
    text-size-adjust: none !important;
}
#sendbox, .subjectSubject {
    max-height: 30vh !important;
}
#camerarollbutton, #unhiddenbutton {
    margin: auto 0 !important;
}

and then comment out the if block in the autoGrow function in chats.html and all those issues should be fixed. I'll include this all in the next update :)

[itsjunetime]

Alright, as of version 0.8.0, this host of issues should be fixed. Closing.

[sabogalc]

#87 (comment)
Unfortunately, I do still get this bug with group chats on Android

[itsjunetime]

Unfortunately, I do still get this bug with group chats on Android

There were multiple bugs with the web interface on mobile discussed in this issue. Do you think you could be more specific about exactly what bug you're running into and share an image of it, if possible?

[sabogalc]

Yes. There is no more blurry text on Android or overlapping text on iOS. Individual chats on Android look great, but group chats on Android are too zoomed in.

[sabogalc]

These screenshots are all from a Samsung S10e connecting to SMServer 0.8.0
Below is a screenshot from an iMessage chat with one person

And below this are screenshots from 4 different group chats. The first and last group chats are very zoomed in, the second one appears normal, and the third one is ever so slightly zoomed in, that the back arrow in the top left is slightly cut off and the first letter of each contact name is slightly cut off as well (I left those uncensored to be able to showcase them). I'm not sure why there are so many differences between different group chats. Also, the emphasis tapbacks in the second group chat are cut off in a strange way.