diff --git a/src/components/searchbar/searchbar.ios.scss b/src/components/searchbar/searchbar.ios.scss
index 697e5431f8..c46804817e 100644
--- a/src/components/searchbar/searchbar.ios.scss
+++ b/src/components/searchbar/searchbar.ios.scss
@@ -210,6 +210,9 @@ $searchbar-ios-toolbar-input-background:  rgba(0, 0, 0, .08) !default;
 // Searchbar animation
 // -----------------------------------------
 
+.searchbar-ios.searchbar-animated.searchbar-show-cancel .searchbar-ios-cancel {
+  display: block;
+}
 .searchbar-ios.searchbar-animated .searchbar-search-icon,
 .searchbar-ios.searchbar-animated .searchbar-input {
   transition: $searchbar-ios-input-transition;
@@ -222,8 +225,6 @@ $searchbar-ios-toolbar-input-background:  rgba(0, 0, 0, .08) !default;
 }
 
 .searchbar-animated .searchbar-ios-cancel {
-  display: block;
-
   margin-right: -100%;
 
   opacity: 0;
diff --git a/src/components/searchbar/test/basic/main.html b/src/components/searchbar/test/basic/main.html
index b3a7d88a7a..622f19c764 100644
--- a/src/components/searchbar/test/basic/main.html
+++ b/src/components/searchbar/test/basic/main.html
@@ -38,6 +38,9 @@
   <h5 padding-left> Search - Mode WP</h5>
   <ion-searchbar mode="wp" animated="true" showCancelButton placeholder="Search"></ion-searchbar>
 
+  <h5 padding-left> Search - Animated and No Cancel</h5>
+  <ion-searchbar [placeholder]="'Search'" [animated]="true" [showCancelButton]="false"></ion-searchbar>
+
   <p padding>
     <button ion-button block (click)="changeValue()">Change Value</button>
   </p>