Welcome to the desert wilderness of iOS keyboard formatting and bubble group sizing. While solvable, this is an extremely tough problem to get around that took me 100s of hours to solve. Consequently, there’s no way for me to completely break down the solution for you, but I can hopefully get you going in the right direction.
The solution is CSS heavy so I hope you’re familiar with CSS.
- Make the overall chat page a floating group. With floating set to both for vertical. The chat page’s header can be on this main floating group, but keep the text input field area a separate floating group.
You will need to apply the following CSS to the chat page floating group:
overflow: hidden !important;
- Add a group within this floating group that takes up about the whole page. It should have the following CSS that resizes it to the proper height for all viewports, allows it to create its own separate scroll from the page, and vertically flips it.
position: absolute !important;
overflow-y: auto !important;
height: calc(100vh - 186px) !important;
Note: The 186px was the height of my text field area, change to whatever is correct for yours.
- Place the RG for your messages inside the group from step 2. Apply the following CSS to also flip it vertically. You’ll need to sort the messages so they load with the most recent at the “top” (now the bottom) of the flipped RG.
If you’ve done this correctly, and done a crap ton of tweaking, then the end result will be the chat page is set to the exact height of the viewport for all devices and will rise with the keyboard as a result. Additionally, the flipping will cause the RG to load from the bottom (previously the top) and for excess messages to expand up through the top of the page (until you scroll up to them).
Here’s a gif of the result for my app:
Hopefully this helps.