fix(content): Reduce iOS flicker when scrolling.

Often times when scrolling on an iOS device, certain elements on
the page would flicker. This was most noticeable with inputs, but
happens elsewhere too.

Add a new `md-no-flicker` CSS class which is automatically applied
to the `<md-content>` which adds a non-changing CSS transform to
the element which fixes the flicker.

Update docs to mention new class and workarounds if it causes
issues for developers.

Fixes #7078.

Closes #8680

Author: topherfangio

src/components/content/content.js

@@ -32,6 +32,15 @@ angular.module('material.components.content', [
  * momentum scrolling is disabled. Momentum scrolling can cause flickering issues while scrolling
  * SVG icons and some other components.
  *
+ * Additionally, we now also automatically apply a new `md-no-flicker` class to the `<md-content>`
+ * which applies a Webkit-specific transform of `translateX(0)` to help reduce the flicker. If you
+ * need to disable this for any reason, you can do so globally with the following code, or on a
+ * case-by-case basis by ensuring your CSS operator is more specific than our global class.
+ *
+ * <hljs lang="css">
+ *   .md-no-flicker { -webkit-transform: none }
+ * </hljs>
+ *
  * @usage
  *
  * Add the `[layout-padding]` attribute to make the content padded.
@@ -41,7 +50,6 @@ angular.module('material.components.content', [
  *      Lorem ipsum dolor sit amet, ne quod novum mei.
  *  </md-content>
  * </hljs>
- *
  */
 
 function mdContentDirective($mdTheming) {
@@ -50,6 +58,7 @@ function mdContentDirective($mdTheming) {
     controller: ['$scope', '$element', ContentController],
     link: function(scope, element) {
       element.addClass('_md');     // private md component indicator for styling
+      element.addClass('md-no-flicker'); // add a class that helps prevent flickering on iOS devices
 
       $mdTheming(element);
       scope.$broadcast('$mdContentLoaded', element);

src/components/content/content.scss

@@ -16,13 +16,6 @@ md-content {
   &[md-scroll-xy] {
   }
 
-  // For iOS allow disabling of momentum scrolling
-  // @see issue #2640.
-
-  &.md-no-momentum {
-    -webkit-overflow-scrolling: auto;
-  }
-
   @media print {
     overflow: visible !important;
   }

src/components/content/demoBasicUsage/style.css

@@ -1,6 +1,6 @@
 
 div.demo-content {
-    height: 600px;
+    height: 450px;
 }
 div[ng-controller] {
     height:100%;

src/core/style/structure.scss

@@ -166,6 +166,18 @@ input {
   }
 }
 
+// For iOS allow disabling of momentum scrolling
+// @see issue #2640
+.md-no-momentum {
+  -webkit-overflow-scrolling: auto;
+}
+
+// Add a class to help reduce flicker
+// @see issue #7078
+.md-no-flicker {
+  -webkit-transform: translateX(0);
+}
+
 @media (min-width: $layout-breakpoint-sm) {
   .md-padding {
     padding: 16px;