disabled样式覆盖问题
IOS 移动端 input设置了readonly
后仍然能被聚焦,后更改为disabled
.
延伸了一个新问题,禁用状态下字体颜色设置无效
|
|
300ms点击延迟
300ms点击延迟,用FastClick.js
扩展:FastClick.js实现原理,在document上绑定touchstart,touchstart,记录当前信息,阻止默认行为,创建一个自定义鼠标事件对象(type: click),并触发该事事件,执行click的回调函数。
1px的边框处理
1px的边框处理,在最小dpr为2的情况下,缩放0.5倍
Web移动端Fixed布局的解决方案
iOS 下经常会有 fixed 元素和输入框(input 元素)同时存在的情况。 但是 fixed 元素在有软键盘唤起的情况下, fixed 定位好的元素跟随页面滚动了起来。(参考另一篇文章)
Web移动端Fixed布局的解决方案
input有placeholder情况下不要设置行高,否则会偏上。
input有placeholder情况下不要设置行高,否则会偏上
伪类 :active 生效
要CSS伪类:active
生效,只需要给 document 绑定touchstart
或touchend
事件.
|
|
###消除 transition 闪屏
两个方法
|
|
大专栏 tr>
扩展:如何启用GPU硬件加速
如,overflow-scrolling,will-change,transform
iOS浏览器横竖屏会出现字体加粗不一致
因此最佳方案是将text-size-adjust
为 100%
。
|
|
iOS 系统中,中文输入法输入英文时,字母之间可能会出现一个六分之一空格
可以通过正则去掉
|
|
移动端 HTML5 audio autoplay 失效问题
解决方法思路:先通过用户 touchstart 触碰,触发播放并暂停(音频开始加载,后面用 JS 再操作就没问题了)。
|
|
IOS Safari 支持localstorage但是setItem异常
出现条件
|
|
问题源自于项目需要在浏览器中遮罩提示,点击关闭状态存储在localstorage中。Safari浏览器关闭后刷新页面层依旧存在 bug issue 简单的存储状态可以使用cookie的方式替代。
Chrome 地址栏自动隐藏交互行为对于fixed 顶部的元素遮挡
页面包含fixed顶部的tip element,当页面向下滑动的时候Chrome地址栏自动隐藏,当向上滑动的时候地址栏自动出现。这种交互行为本身的好处会增大用户可视、交互区域。但是在Chrome 26这个版本这个浏览器UI布局使用adjustPan的方式,以至于向上滑动以后fixed的元素没有被自动向下移动(没有重绘)。
|
|
###Android平台遮罩层下的input、select、a等元素可以被点击和focus(点击穿透)
问题发现于三星手机,这个在特定需求下才会有,因此如果没有类似问题的可以不看。首先需求是浮层操作,在三星上被遮罩的元素依然可以获取focus、click、change.在查看bug报告list以后,找到了两种解决方案,第一是通过层显示以后加入对应的class名控制,第二是通过将可获取焦点元素加入的disabled属性,也可以利用属性加dom锁定的方式(disabled的一种变换方式)