fix: Fix text rendering glitch on mobile

davidchin · Jan 30, 2017 · d809046 · d809046
1 parent b197bad
commit d809046
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 5 deletions.
diff --git a/example/index.html b/example/index.html
@@ -1,7 +1,8 @@
 <!DOCTYPE html>
 <html>
 <head>
-  <meta charset="UTF-8"/>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="stylesheet" href="./example.css">
 </head>
 

diff --git a/example/scss/index.scss b/example/scss/index.scss
@@ -1,10 +1,12 @@
 .form {
-  height: 200px;
   margin: 0 auto;
-  padding-top: 100px;
+  padding: 100px 30px 0;
-  width: 60%;
+
+  @media (min-width: 800px) {
+    max-width: 60%;
+  }
 }
 
 .input-range {
-  margin-bottom: 10rem;
+  margin-bottom: 160px;
 }
diff --git a/src/scss/input-range/_input-range-slider.scss b/src/scss/input-range/_input-range-slider.scss
@@ -31,5 +31,6 @@
 }
 
 .input-range__slider-container {
+  transform: translateZ(0px);
   transition: $input-range-slider-container-transition;
 }