Visualviewport api below iOS 13

UX
1

Hello,

I saw that discourse somehow managed to calculate the top location of the virtual keyboard on iOS.
This is important if you want to position something right on top of the virtual keyboard like this input field where I am typing in right now.

This is not an issue on android browser devices because position fixed elements are automatically pushed right up on the top of the visual keyboard when brought visible.

The workaround for iOS is to use the visualviewport api https://developer.mozilla.org/en-US/docs/Web/API/Visual_Viewport_API
The only problem is that there is no support for devices prior iOS 13…

I’ve tested this same input field on a device with iOS 12.1 and apparently discourse managed to replicate the desired behavior even on unsupported iOS Safari versions.

Could somebody point me in the right direction in order to achieve the same result? Would highly appreciate it :smiley:

Kind regards,
Wouter Vermeersch

2

I remember this being a “mountain of hacks” as @sam called it, not sure you really want to go there…

2 Likes
3

I can imagine it is a mountain of hacks. I am breaking my head on this one for days already so I am ready and willing to climb that mountain with pleasure :grinning: …

I already had to put a filthy hack into place in order to prevent mobile safari from lifting up the top fixed bar when focusing on an input field. Actually I think it will not be that much worse then what I had to do there to make that happen :stuck_out_tongue_closed_eyes:

2 Likes
4

The terrible hack was to rip stuff out of position fixed when the textarea gained focus, and hide everything on the page. Then bring it back when the textarea lost focus.

It was very quirky. So happy @pmusaraj introduced a far more robust implementation.

5 Likes
5

The relevant code for both solutions is here: discourse/app/assets/javascripts/discourse/app/lib/safari-hacks.js at main · discourse/discourse · GitHub

As noted in that file though, we will soon remove the the iOS 12 hacks. iOS 14 came out this year, and only ~5% of devices are still on iOS 12.

4 Likes
6

Thank you for sharing! :smiley:

I took a quick look at you’re workaround , apparently you went the route of hardcoding the sizes of all possible different keyboardsizes?

When they disable auto suggestion though the keyboard changes size, how does it cope with that?

Didn’t know the crowd using iOS 12 was that low ? Are you sure about only 5% remaining with iOS 12 and lower? In that case it might be a waste of time to focus on that particular issue.

7

I checked on the iPhone 6 running iOS 2.14

The workaround works perfectly when autosuggest is enabled … when autosuggest disables we remain with a gap … but as you already stated the amount of users still stuck on iOS 12 is so low… Even much lower for users stuck on iOS 12 in combination with auto suggest disabled.

So you’re fix is the best I can imagine. Thx for sharing ! :wink:

image
image750Ă—1334 122 KB

8

image
image750Ă—1334 123 KB

9

I don’t know whether there are official numbers, but this chart from Mixpanel puts iOS 12 and earlier at 7%.

I very much agree it’s not worth your effort to focus on a fix for this for iOS 12.

3 Likes