iPhone XR iOS 12 UITabBarItem title overlap on top of the picture

Question

The issue only happens on the iPhone XR, it works well on all other iPhone devices.

And I used the original UITabBar component, not the customized one

tabBarItem.titlePositionAdjustment.vertical = -10.0
tabBarItem.selectedImage = UIImage(named: imageName)
tabBarItem.title = barTitle
tabBarItem.image = UIImage(named: unSelectedImage)

Upate:

1. The issue can't be reproduced on the simulator, only on the physical device

2. The interesting things is, it works well on the one iPhone XR, has the issue on another iPhone XR

Update:

1. The user who has the issue open the Display Zoom feature

2. It works well when the use choose the Standard display

Answer 1

The solution is;

extension UIDevice {
var modelName: String {
    var modelID = ""
    #if targetEnvironment(simulator)
    modelID = ProcessInfo.processInfo.environment["SIMULATOR_MODEL_IDENTIFIER"] ?? ""
    #else
        var systemInfo = utsname()
        uname(&systemInfo)
        let machineMirror = Mirror(reflecting: systemInfo.machine)
        modelID = machineMirror.children.reduce("") { identifier, element in
            guard let value = element.value as? Int8, value != 0 else { return identifier }
            return identifier + String(UnicodeScalar(UInt8(value)))
        }
    #endif

    return modelID
    }
}

I use the nativeScale and scale parameter to detect if the user open the Display zoom feature.

 if UIScreen.main.nativeScale > UIScreen.main.scale, UIDevice.current.modelName == "iPhone11,8" {
   // "iPhone11,8" for iPhone XR
  // do nothing here

} else {
   // for other devices
    tabBarItem.titlePositionAdjustment.vertical = -10.0
}