Strange uneven UITabBarItem widths?

Question

I have a customized UITabBarController with 4 tabs. The subclass code is as follow:

- (void)viewDidLoad
{
    [super viewDidLoad];
    [self.viewControllers enumerateObjectsUsingBlock:^(UIViewController *vc, NSUInteger idx, BOOL *stop) {
        NSLog(@"Tab %d: %.1f", (int)idx, vc.tabBarItem.image.size.width);
    }];
}

- (void)viewWillLayoutSubviews {
    CGRect tabFrame = self.tabBar.frame;
    tabFrame.size.height = 56;
    NSLog(@"Width: %.1f", tabFrame.size.width);
    NSLog(@"Screen Width: %.1f", [[UIScreen mainScreen] bounds].size.width);
    tabFrame.origin.y = self.view.frame.size.height - 56;
    self.tabBar.frame = tabFrame;
}

The subclassed UITabBarController increases the height of the tab bar to 56 pixels. I set the class in the Storyboard.

In Storyboard, I have also set the unselected images & selected images for the tabs. The image sizes are:

• 104 x 72px ( 1x )
• 208 x 144px ( 2x )
• 311 x 215px ( 3x )

Also, I have some adjustments in App Delegate's didFinishLaunchingWithOptions:

[[UITabBar appearance] setBackgroundImage:[[UIImage alloc] init]];
[[UITabBar appearance] setShadowImage:[[UIImage alloc] init]];
[[UITabBar appearance] setItemWidth:[[UIScreen mainScreen] bounds].size.width / 4];

However, the Tab Bar Item's widths are slightly different. The middle two are slightly wider.

Then, I use NSLog to debug the widths. I found that the tab widths are all reported as 104.00, which is expected.

What did I miss to adjust the tabs back to equal widths?