iOS Safari Premature word wrapping in flex container on iOS 16+, not below

Question

I have a flex based button with some text and an icon. On an iPhone 14 Pro Max the words wrap prematurely regardless of font size, font type, and/or number of words. Seemingly only wraps the last word. This issue appears on iOS 16+ but not below. Tested in BrowserStack and can't figure out what's happening.

iOS 16+:

iOS 15/below:

button css

display: flex;
width: fit-content;
justify-content: center;
align-items: center;

I found a previous thread talking about a Safari issue wrapping the Inter font incorrectly but this seems to occur regardless of the font I use.

If I adjust the icon size it will allow the text to wrap correctly, but only for certain icon sizes.

Answer 1

To investigate this further, try testing the same on an actual physical device.

Also, run this test on a local Appium grid.

This shall help you pin down the issue.

If the behavior is the same on these, too, then probably something would be off with iOS 16+

Thanks.