iOS: "Save" button concealed when editing first post

The save button is concealed when trying to edit a post:

iOS10, iPhone 7, Safari

Think it’s been like this for a while and I work around by hitting “Done” on the keyboard then clicking the button. I worry that new users may not know to do this.

You mean when editing first post only.

You’re right - I have just tried other posts and the button appears correctly.

Nope:

Looks to me that the predictive text UI in iOS is related to this maybe? I think it’s on by default.

You are scrolled up in that screenshot. Try scrolling down. The header in Safari collapses to a smaller size when you scroll down but expands when you scroll up.

Looking at this more closely, maybe @eviltrout did not account for the full height the last time I asked him to look at this…

I hadn’t actually scrolled, myself.

I clicked the pencil icon on my post, then clicked the text window to begin editing. Then the iOS UI concealed the button.

The user can remedy the situation every time this happens. But as a user I’d want to see the button clearly in the editor without having to scroll. Particularly if I am a new and non-technical user.

See this topic but I feel we must have done this wrong now.

Knowing Apple, I’m sure Mobile Safari is constantly moving the goalposts - I know issues like this are not trivial to fix. Appreciate your efforts, and Discourse is already miles ahead of other forum software on mobile browsers.

I’ll take a crack at this, removing 10% of height for the editor on iOS.

https://github.com/discourse/discourse/commit/c191e2e84c3c52f886e772f8b2a4c7efaaa690d1

I believe it is impossible to get the actual viewport size because the browser does not communicate the size of any of the on-screen phone UI (keyboard, autocomplete, etc).

The guesstimate ratios we are using now for iOS are

  • 45% of screen no matter what you’re doing (creating a topic, or writing a reply)
4 Likes

After recent changes I’m finding the editor button shows consistently on iPhone. Many thanks @codinghorror

3 Likes