iOS 14.5 Safari inline-block nowrap issue

[darcyadams]

There is a change in behavior (a bug, IMO) in iOS 14.5 Safari. Despite that you have nowrap as the white-space rule on your parent container, the inline-block children now wrap when there is not enough horizontal space for them in the parent.
I tried to fix this issue by setting the parent's width to 200vw or whatever width is required for the number of children. This fixes the wrapping issue, but then setting transform: translateX(-100%) has a new meaning, as 100% becomes the equivalent of 200vw.
Not sure what the right solution is here. In my use case, doing transform: translateX(-100vw) fixes the issue. However, this assumes the full screen use case, and this is clearly meant to be more generic than that. You could also switch the children to use absolute positioning, but again you will need to know or derive the desired width of the children to position properly.
Would be grateful for any suggestions for a fix or a workaround here.

[darcyadams]

stumbled upon a workaround for this issue. turns out if you put textOverflow: 'ellipsis' on the viewportStyle (parent of the inline block elements that were wrapping), Safari suddenly start respecting the nowrap rule. I have actually seen this with overflowing text before but it makes zero sense for inline-blocks. Anyhow, glad to have a fix, maybe this will help someone else.