Suggestion Bar height inconsistency
This is a bug in iOS itself. I can’t fix it from inside a keyboard, Apple has to. If you run into it too, tap me too here instead of reporting it again.
Steps to reproduce
- I am in dark mode ios system wide and Auto in EF keyboard. So, issue described below in EF keyboard is in dark mode. But do check for Light mode as well when testing.
- Keep 2 keyboards - default ios keyboard and EF keyboard.
- Make EF keyboard the default and ios as secondary.
- Click any searchable app or textbox just to open the EF keyboard. Now, notice the suggestion bar height and you will see that bottom margin is greater than upper margin.
- Now, switch keyboard to ios default keyboard. And again switch it back to EF keyboard.
- You will notice that the margin issue is fixed everything seems to be aligned now in EF keyboard. Another thing you will notice now if you look closely on the suggestion bar at this step is that there is a color change on the top part of the suggestion bar with the inside of the suggeation bar or I should say the whole bottom part of the keyboard. Basically you will notice is that the portion including and everything below EF in suggestion bar is a box with different dark shade and the top part of the suggestion bar is different dark shade.
- Also, I notice that the bottom part of last row in the keyboard which includes space bar has no margin or space after the bottom part of that row meaning with example look closely at the 123 button or any of the button in last row of the keyboard, once the button bottom ends, there is no space and you will observe a dark shade. Replicate this when you play around with light dark mode without transparent background effect in the whole keyboard.
- Also, reduce the gap between each row. Its too much space. For reference look at deafult ios keyboard.
- Please make these 4 things consistent by testing EF keyboard along with a secondary keyboard and also with just EF keyboard.
What I expected is consistent spacing above the suggestion bar by default and with additional keyboards. Also, consistency in the color above the suggestion bar.
What happened instead is that there is shift in space above the suggestion bar, change in color just above the EF in suggestion bar and just below where the last row ends horizontally. Also, too much gap between rows.
Discussion
Sign in to comment or vote.
@rainmaker24111995 I chased this exact thing myself around build 420 because the shifting strip above the suggestion bar bugged me too. I measured it frame by frame and inside the keyboard's own window the "bad" first open and the "good" one after switching are pixel identical, the bar is always the same 44 pt in the same spot. The strip above it, and the different shade it has, is drawn by iOS itself, outside the window a third-party keyboard is given. Same story with the dark area below the bottom row where the globe key lives. iOS wraps every third-party keyboard in its own glass container and sometimes paints that extra band, sometimes not. You can see the identical seam on SwiftKey or any other non-Apple keyboard. The native one doesn't show it because the native keyboard is that container.
So points 1, 2 and the shade below the last row are out of my reach. A keyboard extension can't even ask where its window sits on screen, let alone draw outside it.
Row spacing is mine though. I calibrated key heights against the native keyboard with a pt grid, my rows are 42.7 pt vs 43.0 native, so the keys themselves match. The gap between rows is tied to the swipe decoder geometry, so it's not a number I tweak by eye. I'll re-measure the iOS 27 native keyboard on the same device class and if its gaps really are tighter now, I'll adjust in a later build.