ion-search CSS3 transition/animation is choppy on iOS, no option to disable it

[gregblass]

Short description of the problem:

'ion-search' component animation is choppy on iOS and doesn't have the option to pass in an option to disable it (facebook iOS style where there is no animation would work just fine).

What behavior are you expecting?

The CSS3 animation works great on chrome on OSX (as expected), but its super choppy and does not feel native on iOS (emulator or physical iPhone 6).

Steps to reproduce:

1. Put an 'ion-search' component on the page
2. Load in xCode emulator or physically on a modern iPhone
3. Tap into the search bar - the animation is super choppy and does not feel native

The component should take in something like:

[hideCancelButton]="shouldHideCancel"

but to disable the animation, like

[leftAlign]="shouldLeftAlign"

Either that, or we need to figure out why CSS3 transitions/animations are so choppy on iOS.

Other information: (suggestions how to fix)
Another angle: It looks like there is a cordova plugin to use native animations? Is this a route that would work or is commonly used? (I'm new to Ionic/Cordova).

Which Ionic Version? 1.x or 2.x
2.x

ionic info from terminal/cmd prompt:
Your system information:

Cordova CLI: 6.1.0 (cordova-lib@undefined)
Ionic Version: 2.0.0-beta.3
Ionic CLI Version: 2.0.0-beta.23
Ionic App Lib Version: 2.0.0-beta.13
ios-deploy version: 1.8.3
ios-sim version: 5.0.4
OS: Mac OS X El Capitan
Node Version: v5.8.0
Xcode version: Xcode 7.2.1 Build version 7C1002

[gregblass]

A workaround for now, in app.ios.scss:

$searchbar-ios-cancel-transition: none;
$searchbar-ios-input-transition: none;

and

.searchbar-search-icon {
  margin-left: 0 !important;
  padding-left: 0 !important;
}
.searchbar-input {
  padding-left: 30px !important;
}

[gregblass]

There's also a significant delay when tapping the search bar, which adds to the non-native feel.

[jgw96]

Findings so far: Through testing in the ios emulator i can confirm that the animation on the ios searchbar is choppy. Its also choppy if i run the app in ios mode on my Nexus 6 (dont have an iphone to test with at the moment). I cant seem to reproduce the delay in the conference app though, although with one of my own apps i can reproduce the delay.

[manucorporat]

well, I think it could be fixed if the animation could be implemented using css3 transforms (translate3d) and will-change: transform, but changing margin-left.

This way it probably gets GPU accelerated and does not require layout recalculation.

[gregblass]

You're exactly right. That will fix it.

[ghenry22]

I just implemented search in my app with beta8 and observed the same, on iOS the searchbar animation is super choppy. Tested in emulator and on a physical iphone6 and the behaviour is the same.

[brandyscarney]

Some discussion on this here: #7387

[jgw96]

@ghenry22 Is the animation choppy when unfocusing the searchbar or when you focus the searchbar?

[ghenry22]

@jgw96 the response and animation seems slow when focusing and when you click cancel. Seems like it's maybe related to the search input resizing.

It seems a bit better on beta10 less choppy and more just "slow" in animating the changes to the search input box size. when you focus and unfocus.

[carloscabral]

i'm using Ionic 2 RC and the problem is still present on iOS. There isn't an oficil workaround to this?

[ghenry22]

@adamdbradley I think this should probably be reopened, option to disable is handy but fixing the actual animation would deliver a better "native" experience.

Just updated to RC1, this DOES disable the animation on the search bar, but now we are stuck with a search bar that just pops into existence rather than animating in as it would on a native platform.

So now we have a search bar that just looks very non-native instead of one that looked nice and native but animated slowly.

[manucorporat]

@ghenry22 animated="true" if you want it animated. We are open to idea to make it faster.

CSS containment could improve performance of this component.
Facebook native app for iOS does not have the searchbar animated.

[ghenry22]

@manucorporat - haha I would love to contribute to a solution but it's way outside my expertise. I'll take a look at the facebook app and see how it's handled there in terms of animation, positioning etc