perf(cards): remove translateZ from ion-card

Yes, oddly enough this makes a performance difference. The translateZ was used as a trick to force ion-card’s rounded corners to take effect on inner elements. However, on a page that has many ion-cards, it takes relatively a lot of power on a low-end device to move them all during a transition. It’s best to not put them on their own layer and let the browser just move one thing.
ionic-team · Feb 4, 2016 · 60fdc5c · 60fdc5c
1 parent 276b1a5
commit 60fdc5c
Showing 1 changed file with 10 additions and 1 deletion.
diff --git a/ionic/components/card/card.scss b/ionic/components/card/card.scss
@@ -7,7 +7,6 @@
 ion-card {
   display: block;
   overflow: hidden;
-  transform: translateZ(0);
 }
 
 ion-card img {
@@ -25,3 +24,13 @@ ion-card-header {
 ion-card-content {
   display: block;
 }
+
+ion-card > :first-child {
+  border-top-left-radius: inherit;
+  border-top-right-radius: inherit;
+}
+
+ion-card > :last-child {
+  border-bottom-left-radius: inherit;
+  border-bottom-right-radius: inherit;
+}