google
/
material-design-lite
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Fix scrolling issue on Safari mobile (fixes #637) (Closes #659)

master
Alexander Surma 2015-07-03 13:54:43 +01:00 committed by Addy Osmani
parent 8c89e69455
commit 821066fe33
3 changed files with 9 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
templates/blog/entry.html
View File

@ -46,12 +46,12 @@
</head>
<body>
<div class="demo-blog demo-blog--blogpost mdl-layout mdl-js-layout has-drawer is-upgraded">
<div class="demo-back">
<a class="mdl-button mdl-js-button mdl-js-ripple-effect mdl-button--icon" href="index.html">
<i class="material-icons">arrow_back</i>
</a>
</div>
<main class="mdl-layout__content">
<div class="demo-back">
<a class="mdl-button mdl-js-button mdl-js-ripple-effect mdl-button--icon" href="index.html">
<i class="material-icons">arrow_back</i>
</a>
</div>
<div class="demo-blog__posts mdl-grid">
<div class="mdl-card mdl-shadow--4dp mdl-cell mdl-cell--12-col">
<div class="mdl-card__media mdl-color-text--grey-50">

2
templates/blog/index.html
View File

@ -45,8 +45,6 @@
</head>
<body>
<div class="demo-blog mdl-layout mdl-js-layout has-drawer is-upgraded">
<header class="mdl-layout__header mdl-layout__header--scroll mdl-layout__header--transparent is-casting-shadow mdl-color-text--white">
</header>
<main class="mdl-layout__content">
<div class="demo-blog__posts mdl-grid">
<div class="mdl-card coffee-pic mdl-cell mdl-cell--8-col">

9
templates/blog/styles.css
View File

@ -34,8 +34,9 @@ body .demo-blog {
}
.demo-blog.mdl-layout .mdl-layout__content {
padding-top: 30vh;
overflow: auto;
padding-top: 230px;
position: relative;
-webkit-overflow-scrolling: touch;
}
.demo-blog .mdl-card {
display: flex;
@ -198,9 +199,6 @@ body .demo-blog {
.demo-blog--blogpost .custom-header {
background-color: transparent;
}
.demo-blog--blogpost .demo-blog__posts > .mdl-card {
margin-top: 230px;
}
.demo-blog--blogpost .demo-blog__posts > .mdl-card .mdl-card__media {
background-image: url('images/road_big.jpg');
height: 280px;
@ -296,6 +294,7 @@ body .demo-blog {
top: 16px;
left: 16px;
color: white;
z-index: 9999;
}
.demo-blog .section-spacer {
flex-grow: 1;