style(sass): move font smooth to mixin and remove webkit properties

autoprefixer is adding the backdrop-filter for us now

core/src/components/action-sheet/action-sheet.ios.scss

@@ -50,7 +50,6 @@
   background: $action-sheet-ios-translucent-background-color;
 
   backdrop-filter: $action-sheet-ios-translucent-filter;
-  -webkit-backdrop-filter: $action-sheet-ios-translucent-filter;
 }
 
 

core/src/components/action-sheet/action-sheet.scss

@@ -4,6 +4,7 @@
 // --------------------------------------------------
 
 ion-action-sheet {
+  @include font-smoothing();
   @include position(0, 0, 0, 0);
 
   position: fixed;
@@ -11,9 +12,6 @@ ion-action-sheet {
   display: block;
 
   touch-action: none;
-
-  font-smoothing: antialiased;
-  -webkit-font-smoothing: antialiased;
 }
 
 .action-sheet-wrapper {

core/src/components/alert/alert.ios.scss

@@ -29,7 +29,6 @@
   background: $alert-ios-translucent-background-color;
 
   backdrop-filter: $alert-ios-translucent-filter;
-  -webkit-backdrop-filter: $alert-ios-translucent-filter;
 }
 
 

core/src/components/alert/alert.scss

@@ -4,6 +4,7 @@
 // --------------------------------------------------
 
 ion-alert {
+  @include font-smoothing();
   @include position(0, 0, 0, 0);
 
   position: fixed;
@@ -18,9 +19,6 @@ ion-alert {
   touch-action: none;
 
   contain: strict;
-
-  font-smoothing: antialiased;
-  -webkit-font-smoothing: antialiased;
 }
 
 ion-alert.alert-top {

core/src/components/app/fonts/ionicons.scss

@@ -20,6 +20,8 @@ $ionicons-font-path: $font-path !default;
 }
 
 ion-icon {
+  @include font-smoothing();
+
   display: inline-block;
 
   font-family: "Ionicons";
@@ -31,9 +33,6 @@ ion-icon {
   text-transform: none;
   speak: none;
 
-  -moz-osx-font-smoothing: grayscale;
-  -webkit-font-smoothing: antialiased;
-
   @include rtl() {
     &[aria-label^="arrow"]::before,
     &[flip-rtl]::before {

core/src/components/back-button/back-button.scss

@@ -13,6 +13,7 @@
 }
 
 .back-button button {
+  @include font-smoothing();
   @include text-align(center);
   @include appearance(none);
 
@@ -39,9 +40,6 @@
   font-kerning: none;
   user-select: none;
 
-  font-smoothing: antialiased;
-  -webkit-font-smoothing: antialiased;
-
   display: flex;
 
   flex-flow: row nowrap;

core/src/components/badge/badge.scss

@@ -4,6 +4,7 @@
 // --------------------------------------------------
 
 ion-badge {
+  @include font-smoothing();
   @include padding($badge-ios-padding-top, $badge-ios-padding-end, $badge-ios-padding-bottom, $badge-ios-padding-start);
   @include text-align(center);
 
@@ -19,9 +20,6 @@ ion-badge {
   white-space: nowrap;
   vertical-align: baseline;
 
-  font-smoothing: antialiased;
-  -webkit-font-smoothing: antialiased;
-
   contain: content;
 }
 

core/src/components/button/button.scss

@@ -4,6 +4,7 @@
 // --------------------------------------------------
 
 .button {
+  @include font-smoothing();
   @include text-align(center);
   @include appearance(none);
 
@@ -30,9 +31,6 @@
   user-select: none;
 
   contain: content;
-
-  font-smoothing: antialiased;
-  -webkit-font-smoothing: antialiased;
 }
 
 .button:active,

core/src/components/card-header/card-header.ios.scss

@@ -11,6 +11,5 @@
 .card-header-translucent-ios {
   background-color: $card-ios-header-translucent-background-color;
 
-  -webkit-backdrop-filter: $card-ios-header-translucent-filter;
   backdrop-filter: $card-ios-header-translucent-filter;
 }

core/src/components/chip/chip.scss

@@ -4,6 +4,8 @@
 // --------------------------------------------------
 
 ion-chip {
+  @include font-smoothing();
+
   box-sizing: border-box;
   display: inline-flex;
 
@@ -12,9 +14,6 @@ ion-chip {
 
   font-weight: normal;
   vertical-align: middle;
-
-  -webkit-font-smoothing: antialiased;
-  font-smoothing: antialiased;
 }
 
 ion-chip > ion-icon {

core/src/components/fab-button/fab-button.ios.scss

@@ -53,7 +53,6 @@
 .fab-translucent-ios {
   background-color: $fab-ios-translucent-background-color;
 
-  -webkit-backdrop-filter: $fab-ios-translucent-filter;
   backdrop-filter: $fab-ios-translucent-filter;
 }
 

core/src/components/footer/footer.ios.scss

@@ -5,6 +5,5 @@
 // --------------------------------------------------
 
 .footer-translucent-ios {
-  -webkit-backdrop-filter: $footer-ios-translucent-filter;
   backdrop-filter: $footer-ios-translucent-filter;
 }

core/src/components/header/header.ios.scss

@@ -5,6 +5,5 @@
 // --------------------------------------------------
 
 .header-translucent-ios {
-  -webkit-backdrop-filter: $header-ios-translucent-filter;
   backdrop-filter: $header-ios-translucent-filter;
 }

core/src/components/loading/loading.ios.scss

@@ -29,7 +29,6 @@
   background-color: $loading-ios-translucent-background-color;
 
   backdrop-filter: $loading-ios-translucent-filter;
-  -webkit-backdrop-filter: $loading-ios-translucent-filter;
 }
 
 

core/src/components/picker/picker.scss

@@ -4,6 +4,7 @@
 // --------------------------------------------------
 
 ion-picker {
+  @include font-smoothing();
   @include position(0, null, null, 0);
 
   position: absolute;
@@ -14,9 +15,6 @@ ion-picker {
   height: $picker-width;
 
   contain: strict;
-
-  -webkit-font-smoothing: antialiased;
-  font-smoothing: antialiased;
 }
 
 .picker-toolbar {

core/src/components/popover/popover.ios.scss

@@ -62,6 +62,5 @@
 .popover-translucent-ios .popover-arrow::after {
   background: $popover-ios-translucent-background-color;
 
-  -webkit-backdrop-filter: $popover-ios-translucent-filter;
   backdrop-filter: $popover-ios-translucent-filter;
 }

core/src/components/segment/segment.scss

@@ -4,6 +4,8 @@
 // --------------------------------------------------
 
 ion-segment {
+  @include font-smoothing();
+
   display: flex;
 
   flex: 1;
@@ -11,7 +13,4 @@ ion-segment {
   justify-content: center;
 
   width: 100%;
-
-  font-smoothing: antialiased;
-  -webkit-font-smoothing: antialiased;
 }

core/src/components/tabbar/tabbar.ios.scss

@@ -32,7 +32,6 @@
   // background-color: color-mod($tabbar-ios-background-color, a($alpha-ios-highest));
   background-color: $tabbar-ios-translucent-background-color;
 
-  -webkit-backdrop-filter: $tabbar-ios-translucent-filter;
   backdrop-filter: $tabbar-ios-translucent-filter;
 }
 

core/src/components/toast/toast.ios.scss

@@ -27,7 +27,6 @@
   background: $toast-ios-translucent-background-color;
 
   backdrop-filter: $toast-ios-translucent-filter;
-  -webkit-backdrop-filter: $toast-ios-translucent-filter;
 }
 
 .toast-ios .toast-wrapper.toast-top {

core/src/components/toolbar/toolbar.ios.scss

@@ -67,7 +67,6 @@
 }
 
 .toolbar-translucent-ios .toolbar-background-ios {
-  -webkit-backdrop-filter: $toolbar-ios-translucent-filter;
   backdrop-filter: $toolbar-ios-translucent-filter;
 }
 

core/src/components/toolbar/toolbar.scss

@@ -4,6 +4,8 @@
 // --------------------------------------------------
 
 ion-toolbar {
+  @include font-smoothing();
+
   box-sizing: border-box;
   position: relative;
   z-index: $z-index-toolbar;
@@ -17,9 +19,6 @@ ion-toolbar {
 
   width: 100%;
 
-  -webkit-font-smoothing: antialiased;
-  font-smoothing: antialiased;
-
   contain: content;
 }
 

core/src/themes/ionic.mixins.scss

@@ -8,6 +8,14 @@
   appearance: $val;
 }
 
+// Font smoothing
+// --------------------------------------------------
+
+@mixin font-smoothing() {
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-font-smoothing: antialiased;
+}
+
 // Input Placeholder
 // --------------------------------------------------