Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Browse files

Fix iOS7 scrolling

  • Loading branch information...
commit 2ed76bc2052174f4196075fa4865535b64c8e4f0 1 parent 14a246a
@FWeinb authored
View
2  README.md
@@ -20,4 +20,4 @@ You need to have nodejs and ruby for compass/sass
This is currently working in
* Chrome 29+ (enable 'experimental-webkit-features'/'enable-experimental-web-platform-features')
* Safari 6.1 beta
- * Mobile Safari on iOS7 (slow and **no scrolling**)
+ * Mobile Safari on iOS7, scrolling is working. But **no inertial scrolling**
View
11 src/css/main.css
@@ -4,14 +4,10 @@
/* Not covered by autoprefixer... */
-webkit-flow-into: content;
flow-into: content;
- overflow: hidden;
overflow-y: auto;
- -webkit-overflow-scrolling: touch;
- /* Not covered by autoprefixer... */
- overflow-scrolling: touch;
}
-/* line 21, ../scss/_translucent.scss */
+/* line 17, ../scss/_translucent.scss */
.header__background,
.phone__content {
transform: translateZ(0);
@@ -21,6 +17,11 @@
flow-from: content;
}
+/* line 28, ../scss/_translucent.scss */
+.phone__content {
+ -webkit-overflow-scrolling: touch;
+}
+
/* line 7, ../scss/main.scss */
.content {
padding: 1em 1em 0 1em;
View
12 src/css/main.prefix.css
@@ -6,14 +6,10 @@
/* Not covered by autoprefixer... */
-webkit-flow-into: content;
flow-into: content;
- overflow: hidden;
overflow-y: auto;
- -webkit-overflow-scrolling: touch;
- /* Not covered by autoprefixer... */
- overflow-scrolling: touch;
}
-/* line 21, ../scss/_translucent.scss */
+/* line 17, ../scss/_translucent.scss */
.header__background,
.phone__content {
@@ -26,6 +22,12 @@
flow-from: content;
}
+/* line 28, ../scss/_translucent.scss */
+
+.phone__content {
+ -webkit-overflow-scrolling: touch;
+}
+
/* line 7, ../scss/main.scss */
.content {
View
4 src/index.html
@@ -4,8 +4,6 @@
<meta charset="UTF-8">
<title>iOS7 Translucent Demo</title>
<link rel="stylesheet" href="css/main.prefix.css">
- <script src="/js/dat.gui.min.js"></script>
- <script src="/js/main.js"></script>
</head>
<body>
@@ -108,5 +106,7 @@
</div>
+ <script src="/js/dat.gui.min.js"></script>
+ <script src="/js/main.js"></script>
</body>
</html>
View
6 src/js/main.js
@@ -79,7 +79,7 @@ window.onload = function() {
var cInput = document.querySelector('.c input');
cInput.disabled = true;
+};
-
-
-};
+// Activate scrolling on iOS7 (Don't know why this is working)
+document.addEventListener('touchstart', function(){});
View
8 src/scss/_translucent.scss
@@ -7,12 +7,8 @@
// Make it scrollable on the y-axis
- overflow:hidden;
overflow-y:auto;
- // Scroll on touch devices
- -webkit-overflow-scrolling: touch; /* Not covered by autoprefixer... */
- overflow-scrolling: touch;
}
@@ -29,6 +25,10 @@
flow-from: content;
}
+%contentFlow{
+ -webkit-overflow-scrolling: touch;
+}
+
@mixin setContentHeight($content-height, $header-height){
height: $content-height;
Please sign in to comment.
Something went wrong with that request. Please try again.