Changeset 29926

Timestamp:

10/16/2014 08:34:10 PM (10 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);
     }