Yuchen Zhong Yuchen Zhong - 8 days ago 5
iOS Question

Search Icon Distorted in iPhone 6 Plus - Squashed to an Egg Shape

I have a search bar in the navigation title view. And two buttons as the right bar button items. After rotating the device a number of times, the shape of the search icon seems to be squashed and becomes a egg-like shape. See the following image.

enter image description here

Here is a minimum implementation that I can find to reproduce this:


  • Create new project from template Single View Application

  • Go to the main storyboard and embed in a navigation controller (Editor > Embed In> Navigation Controller)

  • Replace the following code in
    ViewController.m
    :

    @interface ViewController ()
    @property (nonatomic, strong) UISearchBar *searchBar;
    @property (nonatomic, strong) UIBarButtonItem* addButton;
    @property (nonatomic, strong) UIBarButtonItem* editButton;
    @end

    @implementation ViewController
    - (void)viewDidLoad {
    [super viewDidLoad];
    // Add a search bar
    _searchBar = [[UISearchBar alloc] init];
    _searchBar.placeholder = @"Search";
    self.navigationItem.titleView = _searchBar;
    // Add two buttons
    _addButton = [[UIBarButtonItem alloc] initWithBarButtonSystemItem:UIBarButtonSystemItemAdd target:self action:nil];
    _editButton = [[UIBarButtonItem alloc] initWithTitle:@"Edit" style:UIBarButtonItemStylePlain target:nil action:nil];
    self.navigationItem.rightBarButtonItems = @[_editButton, _addButton];
    }
    @end

  • Compile and run it either in iPhone 6+ simulator, or iPhone 6+ device. Rotate the device a number of times and you will the search icon is distorted gradually.



Additional notes:


  • This seems to happens only on iPhone 6 Plus. We tested on a lot of other devices (including but not limited to iPhone 6, iPhone 5s) and don't this issue.

  • If we replace the placeholder for
    UISearchBar
    with some other string (other than "Search"), we don't see the distortion.


Answer

I have submitted bug report to Apple for this one and will keep you guys updated.

The bug seems to be related to the size of the buttons and the size of placeholder string. Some work around that for us so far:

  • Replace the placeholder string to something else other than "Search":

    _searchBar.placeholder = @"Search";
    
  • Use some other buttons either such as by changing the title "Edit" to something else.