iOS Chrome - mobile form inputs are impossible to use/broken


(Martin Heidegger) #1

When I try to edit any field in the UI on a iPhone then the UI focuses on a different field which makes it really hard (almost impossible) to use any input field. Including the login form and the new topic form. Do you have the same issue? Is this only a iOS issue?


iOS: Keyboard hides topic field
(Sam Saffron) #2

Which version of IOS are you on?


(Martin Heidegger) #3

I use Chrome on iOS7.


(Sam Saffron) #4

Does the same issue happen in safari ?


(Jeff Atwood) #5

Chrome is very quirky on iOS (and slow, because it cannot use platform compiled javascript engine), we really only support the native default browser on each mobile platform, e.g. Mobile Safari on iOS, Chrome on Android, IE on Windows Phone, etc.


(Martin Heidegger) #6

Many people do use Chrome (because of syncing) specially developers and everyone in the team I am working. Also I couldn’t reproduce the same issue on Safari. There is also the argument that Chrome (other than Safari) just uses the webview thus other webview applications will have most likely similar issues. But anyways: I wouldn’t mention this bug if it was at a small detail but this is at a “cannot use” level.


(Jeff Atwood) #7

Chrome iOS has quirks I have not seen on any platform, including desktop Chrome and Android Chrome. I strongly recommend against using it, this is a support request, our official position is we support the default mobile browsers on each platform. Anything else and you are on your own.


(Shobhit Shrivastava) #8

I have experienced broken mobile form inputs on ios Safari. There are mainly two issues that i’ve noticed that affect me as a user.

  1. The account creation form doesnt show up when you click the “create an account” label for the first time (on most occassions).
    2)The elements of account creation form are sometimes hidden and the background page would scroll when you try to scroll the account creation form .

(Alexander) #9

Thanks for reporting this, @leichtgewicht.

FWIW @codinghorror this affects me too: I actively avoid looking at Discourse forums on my phone.


(Jeff Atwood) #10

I recommend you and @leichtgewicht file bugs at Google for iOS chrome. It is incredibly quirky, and does things I have never seen Android or desktop Chrome do.

@neil can you look into the sign up form on iOS Mobile Safari issues that @shobhit007 reported?


(Neil Lalonde) #11

I’m replying from iOS Safari. Input field focus didn’t change. Lost a draft. Have to click save twice.

Yeah, I see a lot of problems here. The login and signup forms are really broken.


(Neil Lalonde) #12

I made some fixes to login and signup forms on mobile.

Please try again and let me know if it still happens. I think it’s because the link was at the very bottom of the screen. Safari on iOS 7 will reveal the bottom nav links if you touch the bottom of the screen, instead of clicking on whatever you were trying to click. I have this problem all the time on all websites. I need to scroll up a bit and then click links.

So. Annoying. There’s an article about this problem here.

I tested the Chrome on iOS experience, and quickly ended up in a state where the keyboard could not be dismissed, the header was half-way down the page, and other crazy things happened. I had to restart chrome to fix it. In Safari, some wacky things can happen too.

The main problem seems to be that the background content is scrolling, but when we’re showing a modal it shouldn’t do that. I tried a solution, but it didn’t work on iOS. Maybe there’s a better solution out there.


(Shobhit Shrivastava) #13

@neil Have the changed been pushed to meta.discourse production instance ? The login form seems to be further broken on ios safari. I can no longer go to create an account form now because the background modal (eg. topic list view) scrolls when i try to scroll the page down where create an account link is at. I can only see an email input screen and when i try scolling down to see other elements, it would scroll the background modal. Now it seems there is no way to create an account (email and password based account) on iphone and possibly other ios devices. I am using iphone 4s with ios 7.


(Neil Lalonde) #14

No it’s not deployed on meta yet. Have a look on try.discourse.org. The scrolling problem still needs a fix, but I find the login and signup modals are less broken…


(Shobhit Shrivastava) #15

I have a possible fix for the scrolling problem. I am setting overflow: hidden; position: fixed; on .modal-open class and this prevents scrolling on the background modal.


(Shobhit Shrivastava) #16

Bootstrap adds a modal-open class to the background modal when a popup is shown.


(Neil Lalonde) #17

:+1:

Ah brilliant, that works! Are you going to make a pull request, or should I add it myself? Either way is fine.

EDIT: I committed the change. Thanks!


(Arum Dev) #18

I had this issue in iOs 7.1 on iphone 5 today.

It happened when I tried to login to meta.discourse.org for the first time on the phone, using facebook as login. Safari opened a new tab to log me into facebook first, but I went back to the discourse tab and tried to login with username and password, which of course didn’t work, but that’s when the bug appeared and the input boxes were all miss-aligned. I’ve since logged into FB on mobile safari and I can no longer reproduce the bug, but it was there for a while.


(Adnan) #19

It’s kinda impossible to log in using mobile. Takes a few a tries to focus on username/password fields, seems like the form is being pushed down and hidden. I was able to finally login, but was slightly frustrated and confused. I will grab some screenshots. I’m on an iphone.


(Jeff Atwood) #20

Just a reminder that we only officially support the default browser on mobile… and that iOS Chrome is insanely quirky.

That said never opposed to better more compatible markup, if a PR is submitted.