iPhoneXr canvas层级失效
大致就是这样,一个img在canvas上面,所有手机img正常显示,就是ios的这个机型有问题,系统版本14.0
img的层级不论多大都会被canvas覆盖
解决办法尽然是将canvas的层级设置为-1.虽然逻辑上没有毛病,但是着实让人费解
display:fixed元素滚动跟随
如图大致所示,navbar可以是搜索框也可以是底部导航栏,滑动page时,navbar跟随滚动,这个问题是由于布局时navbar写在了page元素内,由于布局上下文的原因,此时的navbar就不只是简简单单的相对于视窗了.这个解释虽然有一定的道理,但是对于Android端来说并不会导致滚动跟随…这个应该就是ios内部机制问题了
解决办法:将fixed元素从要滚动的元素内拿出,放在平级以上就行,或者干脆改用flex布局
Android单行文字无法上下垂直居中的问题
这个问题我觉得对于强迫症来说确实有问题,但是视觉效果上来说,垂直居中是偏上一点点会让人觉得上下是居中的(这个出自老外的一本书 css揭秘),不过Android机型普遍特别是文字字号小于14px的时候偏上明显…这个目前在我看来,单从css来说没有彻底的解决方法,网上有各种奇技淫巧,其实都治标不治本,最厉害的方式,我看啊,如果真的过不了测试和UED的眼睛,那就只能切图了.
滑动穿透问题
问题大致就是在一个滑动界面上弹一个遮罩提示,滑动遮罩时底部元素会继续滚动.
这个问题,一直以来就有,阻止默认事件在这个地方一点用都没有,除了将底部滚动元素overflow设置为hidden外,我觉得目前没有更简单的方法,不过这个方法在PC端会有个问题,那就是页面会因为突然没有滚动条而闪动一下.
彻底解决这个问题我觉得得单独实现一个滚动组件,滚动组件不依赖浏览器自带的滚动条和滚动事件,滚动页面以transform或者定位来实现滑动的功能,看了一下网易云音乐的播放列表,貌似就是这么干的,简直厉害.
1px问题
这个…网上很多解决办法,推荐使用根据设备的devicePixelRatio动态设置视窗的initial-scale
先码这么多吧,还有一些奇葩的问题,都是以ios系统为主的,不知道为什么原生ios那么流畅,到了H5端就各种不愉快了…