Changeset 29926

Timestamp:

10/16/2014 08:34:10 PM (12 years ago)

Author:

iandstewart

Message:

Twenty Fifteen: Removes flashing of background behind fixed position elements when scrolling in mobile and desktop Safari.

Props iamtakashi, fixes #29973 and #29987.

File:

• trunk/src/wp-content/themes/twentyfifteen/style.css (modified) (4 diffs)

trunk/src/wp-content/themes/twentyfifteen/style.css

@@ -3794 +3794 @@
 
 @media screen and (min-width: 59.6875em) {
+        body:before,
+        .site-header,
+        .main-navigation,
+        .social-navigation,
+        .widget {
+                -webkit-transform: translateZ(0); /* Fixes flashing bug with scrolling on iOS Safari */
+        }
+
         body:before {
                 background-color: #fff;
@@ -3815 +3823 @@
                 float: left;
                 height: 100%;
-                overflow-y: auto;
                 margin-right: -100%;
                 max-width: 413px;
-                -webkit-overflow-scrolling: touch;
+                overflow-y: scroll;
+                -webkit-overflow-scrolling: touch; /* Enable momentum scrolling on iOS Safari */
                 position: fixed;
                 width: 29.4118%;
@@ -3833 +3841 @@
                 margin: 0;
                 padding: 0;
-                -webkit-transform: translateZ(0);
         }
 
@@ -4073 +4080 @@
                 margin: 20% 0;
                 padding: 0 20%;
-                -webkit-transform: translateZ(0);
         }