Open Radar

 
Area:
UIKit

Summary:
When a UITabView is embedded in the master view of a UISplitView and deployed to an iPad which is in portrait mode, the tab bar items have their labels positioned to the side of their icons instead of underneath. This causes overlap, as there is not enough room to display everything. All other orientations (landscape, multitasking large or small while in portrait) use the correct location for the labels--the exception is landscape multitasking where the split view is the large application (same width as fullscreen portrait.) 

If preferredDisplayMode is set .allVisible, the issue does not occur; if preferredDisplayMode is set to .primaryOverlay, the issue occurs, even for orientations where it did not under .automatic. Essentially, it occurs whenever the master view is set to appear by sliding over the detail view.

Steps to Reproduce:
Create an iOS application (master-detail is fastest way, but I believe this occurs any time a split view is used regardless of initial template.) Set the master view of that split view to be a UITabBarController. Launch the application and go to an orientation where the master view appears over the detail view, and observe the tab bar. Optionally add items to the tab bar to make 5 total, and observe the overlap (see screenshots.)

Expected Results:
Expected tab bar to orient items with labels under their icons, i.e. the same appearance tab bar items have had since the beginning.

Observed Results:
Tab bar orients items with their labels to the right of their icons (in LTR languages at least, I did not test the opposite.) This matches the appearance of tab bars in iOS 11 in landscape mode, when they have the full width of the bar to expand. However, since this is a master view controller, they do not actually have enough room, and the items overlap.

Version:
iOS 11 beta 4 (15A5327g) in the simulator and on device

Notes:

Configuration:
This occurs when running on iPads (all screen sizes). This does not occur on the iPhone Plus in landscape mode