Skip to content

Commit

Permalink
enable Container smooth scrolling on iOS, resolves #23
Browse files Browse the repository at this point in the history
  • Loading branch information
minwe committed May 10, 2016
1 parent 77514de commit f4f9a29
Showing 1 changed file with 7 additions and 4 deletions.
11 changes: 7 additions & 4 deletions src/scss/components/_container.scss
Original file line number Diff line number Diff line change
Expand Up @@ -106,13 +106,16 @@
// @see https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariCSSRef/Articles/StandardCSSProperties.html#//apple_ref/doc/uid/TP30001266-SW26
// @see http://weblog.west-wind.com/posts/2015/Jun/05/IPad-Scroll-Issues-with-Fixed-Content
// @see http://www.quirksmode.org/css/css2/overflowscrolling.html
// - 如果声明的值为 `touch`,在结合 Container 使用时,Modal 的遮罩层在 safari 中会被截取遮挡
// 原因是 Safari 真的用了原生控件来实现,对于有 -webkit-overflow-scrolling的网页
// 会创建一个UIScrollView,提供子layer给渲染模块使用
// - 如果声明的值为 `touch`,在结合 Container 使用时,Modal 的遮罩层在 iOS Safari 中会被截取遮挡
// 原因是 Safari 真的用了原生控件来实现,对于有 -webkit-overflow-scrolling 的网页
// 会创建一个 UIScrollView,提供子 layer 给渲染模块使用
// http://blog.csdn.net/hursing/article/details/9186199
// - 可以尝试使用绝对定位的方式定位 kitchen-sink 中的 navbar 和 tabbar,以避免这一问题,
// 提高交互体验,具体可参考 Framework7 的实现方式
// -webkit-overflow-scrolling: touch;

// 2016.05.06 update:
// Modal 和 Notification 改为使用 portal 模式,即渲染的时候会插入到 body 下面,避免被 UIScrollView 截断
-webkit-overflow-scrolling: touch;

// introduce iOS style springy scrolling
&:before,
Expand Down

0 comments on commit f4f9a29

Please sign in to comment.