关于一些奇葩的兼容bug

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

input框点击位置移动问题在这里插入图片描述

这个也是出现在ios(当时系统版本13.0)的bug,弹窗toast类似于一个信息的收集窗口,有input输入框,toast内可以滚动,点击toast外部可以隐藏toast,点击响应的按钮可以呼出toast,第一次呼出toast可以正常输入,滑动toast后关闭toast然后再次呼出toast,你会发现直接点击input框是没办法让光标focus在input框里面的,反而是在偏离输入框上或者下的区域点击会出现光标
解决方法:每次focus前都要记住scrollbar的位置,每次进入的时候都要手动调用一下scrollTo回到上次记录的位置(o(╥﹏╥)o当时这个方法是瞎试出来的)

先码这么多吧,还有一些奇葩的问题,都是以ios系统为主的,不知道为什么原生ios那么流畅,到了H5端就各种不愉快了…

©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页