fix(text-rendering): Disable text-rendering:optimizeLegibility for lo…

…w end devices
ionic-team · Feb 24, 2014 · 1028946 · 1028946
1 parent 3a69bb3
commit 1028946
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 22 deletions.
diff --git a/js/ext/angular/test/sideMenu2.html b/js/ext/angular/test/sideMenu2.html
@@ -2,9 +2,7 @@
   <head>
     <meta charset="utf-8">
     <title>Side Menus</title>
-
-    <!-- Sets initial viewport load and disables zooming  -->
-    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
+    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
     <link rel="stylesheet" href="../../../../dist/css/ionic.css">
     <script src="../../../../dist/js/ionic.bundle.js"></script>
   </head>
@@ -70,19 +68,13 @@
             <ion-item ion-item="item" ng-href="#" ng-click="itemClick()" ng-repeat="item in range">
               <strong>{{$index}}</strong>
               <b>:</b>
-              <span>Item</span>
-              <span>.</span>
-              <span>.</span>
-              <span>.</span>
-              <span>.</span>
-              <span>.</span>
-              <span>.</span>
-              <span>.</span>
-              <span>.</span>
-              <span>.</span>
-              <span>.</span>
-              <span>.</span>
-              <span>.</span>
+              <em>
+                <span># <span>$ <span>W <span>Q</span></span></span></span>
+                <span>% <span>A <span>H <span>?</span></span></span></span>
+                <span>&amp; <span>@ <span>* <span>X</span></span></span></span>
+                <span>j <span>p <span>q <span>y</span></span></span></span>
+                <span>{ <span>} <span>( <span>)</span></span></span></span>
+              </em>
             </ion-item>
           </div>
 
@@ -205,7 +197,7 @@
         };
 
         $scope.range = [];
-        for (var i=0; i<150; i++) $scope.range.push(i);
+        for (var i=0; i<15; i++) $scope.range.push(i);
 
         $scope.attendees = [
           { firstname: 'Nicolas', lastname: 'Cage' },

diff --git a/scss/_scaffolding.scss b/scss/_scaffolding.scss
@@ -44,18 +44,23 @@ body, .ionic-body {
   font-size: $font-size-base;
   font-family: $font-family-base;
   line-height: $line-height-computed;
-  -webkit-backface-visibility: hidden;
   text-rendering: optimizeLegibility;
+  -webkit-backface-visibility: hidden;
   -webkit-user-drag: none;
 }
 
+body.grade-b,
+body.grade-c {
+  // disable optimizeLegibility for low end devices
+  text-rendering: auto;
+}
+
 .content {
   // used for content areas not using the content directive
   position: relative;
 }
 
 .scroll-content {
-
   position: absolute;
   top: 0;
   right: 0;
@@ -68,7 +73,6 @@ body, .ionic-body {
 
   width: auto;
   height: auto;
-  //-webkit-perspective: 1000;
   -webkit-backface-visibility: hidden;
 }
 
@@ -79,7 +83,6 @@ body, .ionic-body {
   // Hide the top border if any
   margin-top: -1px;
   height: 100%;
-  //-webkit-perspective: 1000;
   -webkit-backface-visibility: hidden;
 }
 
@@ -93,7 +96,6 @@ body, .ionic-body {
   @include text-size-adjust(none);
   @include translateZ(0);
   @include transform-origin(left, top);
-  //-webkit-perspective: 1000;
   -webkit-backface-visibility: hidden;
 }
 
@@ -141,6 +143,7 @@ body, .ionic-body {
 }
 .grade-b .scroll-bar-indicator,
 .grade-c .scroll-bar-indicator {
+  // disable rgba background and border radius for low end devices
   border-radius: 0;
   background: #aaa;
 }