#feature-auto skew bg only to avoid blurry fonts in chrome when using transforms

website/source/index.html.erb

@@ -24,6 +24,7 @@
 			</div>
 		</div>
 	</div> <!-- /container -->
+	<div class="feature-skew" id="feature-auto-bg"></div>
 </div> <!-- /feature -->
 
 <div class="feature" id="feature-iterate">

website/source/stylesheets/_home.less

@@ -35,15 +35,27 @@
 		background-position: center 0;
 		background-repeat: no-repeat;
 	}
+
+	.feature-skew{
+		position: absolute;
+		top: 0px; 
+		bottom: 0px;
+		left: 0px;
+		width: 100%;
+		height: 100%;
+	}
 }
 
 #feature-auto{
+	position: relative;
 	padding: 200px 0 300px;
 	margin-top: -36px;
+	
+	#feature-auto-bg{
 		background: #fff url(../images/white-wireframe.png) center top no-repeat;
 		background-size: cover;
-
-	>.container{
+		.skewY(-3deg);
+		z-index:-1;
 	}
 
 	h2{

website/source/stylesheets/_jumbotron.less

@@ -4,7 +4,7 @@
 
 #jumbotron-mask{
   position:relative;
-  z-index:0;
+  z-index:-2;
   height:700px;
   margin-top: @negative-hero-margin;
   background-color: black;

website/source/stylesheets/main.css

@@ -594,7 +594,7 @@ body.page-home #footer {
 }
 #jumbotron-mask {
   position: relative;
-  z-index: 0;
+  z-index: -2;
   height: 700px;
   margin-top: -70px;
   background-color: black;
@@ -1040,11 +1040,28 @@ body.page-home #footer {
   background-position: center 0;
   background-repeat: no-repeat;
 }
+.feature .feature-skew {
+  position: absolute;
+  top: 0px;
+  bottom: 0px;
+  left: 0px;
+  width: 100%;
+  height: 100%;
+}
 #feature-auto {
+  position: relative;
   padding: 200px 0 300px;
   margin-top: -36px;
+}
+#feature-auto #feature-auto-bg {
   background: #ffffff url(../images/white-wireframe.png) center top no-repeat;
   background-size: cover;
+  -webkit-transform: skewY(-3deg);
+  -moz-transform: skewY(-3deg);
+  -ms-transform: skewY(-3deg);
+  -o-transform: skewY(-3deg);
+  transform: skewY(-3deg);
+  z-index: -1;
 }
 #feature-auto h2 {
   font-size: 43px;