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

Props iamtakashi, fixes #29973 and #29987.

Built from https://develop.svn.wordpress.org/trunk@29926


git-svn-id: http://core.svn.wordpress.org/trunk@29678 1a063a9b-81f0-0310-95a4-ce76da25c4cd
This commit is contained in:
Ian Stewart 2014-10-16 20:35:20 +00:00
parent cac92b2876
commit 2934146919

View File

@ -3793,6 +3793,14 @@ span > video {
*/ */
@media screen and (min-width: 59.6875em) { @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 { body:before {
background-color: #fff; background-color: #fff;
box-shadow: 0 0 1px rgba(0, 0, 0, 0.15); box-shadow: 0 0 1px rgba(0, 0, 0, 0.15);
@ -3814,10 +3822,10 @@ span > video {
.sidebar { .sidebar {
float: left; float: left;
height: 100%; height: 100%;
overflow-y: auto;
margin-right: -100%; margin-right: -100%;
max-width: 413px; max-width: 413px;
-webkit-overflow-scrolling: touch; overflow-y: scroll;
-webkit-overflow-scrolling: touch; /* Enable momentum scrolling on iOS Safari */
position: fixed; position: fixed;
width: 29.4118%; width: 29.4118%;
} }
@ -3832,7 +3840,6 @@ span > video {
display: block; display: block;
margin: 0; margin: 0;
padding: 0; padding: 0;
-webkit-transform: translateZ(0);
} }
.site-main { .site-main {
@ -4072,7 +4079,6 @@ span > video {
border-bottom: 0; border-bottom: 0;
margin: 20% 0; margin: 20% 0;
padding: 0 20%; padding: 0 20%;
-webkit-transform: translateZ(0);
} }
.site-branding { .site-branding {