Scrolling DIV and Canvas flicker on iPhone/iPad touch

简介:

最近一直在优化一个网站,为了使其能在移动设备上有更好的用户体验,我们做了许多调整,包括将所有的Flash和Silverlight控件替换成HTML5,以及添加一些针对触屏的事件等。在下一篇文章中我会介绍一些针对触屏开发的技巧。

  DIV元素默认的滚动条在iPhone和iPad会消失,其实这个问题不是代码或CSS本身的问题。Apple默认将其系统上所有的滚动条都隐藏起来了,当然这也包括HTML元素。在Apple设备上,默认行为是当用户触摸并滑动屏幕时,所在的元素如果支持滚动条并且滚动条可用,那么将立即显示滚动条并支持滑动。默认情况下滚动条都是不显示的。这里有两篇文章介绍了如何在Apple设备上给DIV添加滚动条。

http://www.cnblogs.com/weinan/archive/2013/01/05/2832800.html

http://cubiq.org/scrolling-div-on-iphone-ipod-touch

  几个关键的CSS样式:

height: 450px;
overflow: hidden;
-webkit-overflow-scrolling:touch;

   另外,在Apple设备上,如果页面上有动态生成的Canvas对象并且能响应touch事件,当你用手指点击并在Canvas上滑动时它会莫名其妙地闪烁,要解决这个问题只需要给Canvas对象添加下面这个样式即可:

-webkit-tap-highlight-color:rgba(0,0,0,0);

 


本文转自Jaxu博客园博客,原文链接:http://www.cnblogs.com/jaxu/archive/2013/05/17/3083031.html,如需转载请自行联系原作者

相关文章
|
6月前
|
移动开发 网络协议 Linux
We discovered one or more bugs in your app when reviewed on iPhone and iPad running iOS 14.1
We discovered one or more bugs in your app when reviewed on iPhone and iPad running iOS 14.1
65 0
|
6月前
|
关系型数据库 MySQL iOS开发
macOS Catalina(10.15)如何访问iPhone(Ipad)的应用文档文件
macOS Catalina(10.15)如何访问iPhone(Ipad)的应用文档文件
213 0
|
Web App开发 网络虚拟化 iOS开发
如何获取苹果设备的UDID(iPhone/iPad UDID查询方法)
如何获取苹果设备的UDID(iPhone/iPad UDID查询方法)
|
iOS开发
苹果怎么查看UDID iPhone/iPad查看UDID教程【详解】
苹果怎么查看UDID iPhone/iPad查看UDID教程【详解
|
iOS开发
苹果怎么查看 UDID iPhone/iPad 查看 UDID 教程【详解】
在开发 iPhone 和 iPad 软件的时候,要使用 UDID 来做真机测试,那么如何查看 iPhone 或者 iPad 的 UDID 呢?下面介绍三种最简单的查看 UDID 的方法,供大家参考!下面就详情来看看。
|
存储 算法 C++
苹果怎么查看UDID iPhone/iPad查看UDID教程【详解】
苹果怎么查看UDID iPhone/iPad查看UDID教程【详解】
|
iOS开发
iPhone和ipad去掉按钮默认样式
1.手机端web开发,遇到一下问题: 按钮应该是红色的背景,结果上面有一层白色的蒙层。 去掉所有自定义样式发现:白色的蒙层是button自带的样式,在iPhone和ipad上面没有去掉
107 0
|
Web App开发 iOS开发
为 iPhone 和 iPad 自定义网站的主屏幕图标
iPhone 和 iPad 等苹果设备使用主屏幕 (Home Screen, 也称桌面) 管理应用程序, 还可以通过浏览器的添加到主屏幕功能将网站链接作为快捷方式添加为主屏幕图标. 是否你也想过为网站定义一个图标, 如果用户将网站添加至主屏幕, 网站链接看起来更像原生程序, 也能获得更多的关注.
1505 0
|
iOS开发
iPhone与iPad的屏幕支持方向
iPhone与iPad的屏幕支持方向
192 0
iPhone与iPad的屏幕支持方向
|
机器学习/深度学习 传感器 自然语言处理
没有新款iPhone!苹果发布最强5nm芯片,性能提升4成,造就史上最快iPad
没有新款iPhone!苹果发布最强5nm芯片,性能提升4成,造就史上最快iPad
194 0