在移动开发项目中,由于IOS和Android的不同,通常会遇到一些莫名其妙、奇葩的CSS3兼容问题,( ̄_ ̄|||)。
现记录开发过程中的技术坑总结,持续收集整理更新。
1、translation 闪烁问题
-webkit-backface-visibility: hidden; -webkit-perspective: 1000; -webkit-transform-style: preserve-3d;
可以使用以上三行来解决,但是,会有个问题:最后一行在有3D动画效果的情况下,在IOS系统中会造成文字发虚现象,所以做3D变换动画的元素部分最好使用图片吧。
2、微信内,h5页面在跳转过链接后会有一个前进后退的导航条
现在我们很多项目都是在微信内运行,IOS下就会在进行链接跳转后出现一个前进后退的导航条。此导航条的高度为49px,在做自适应适配的时候,可能需要考虑此高度的存在。
3、transform 属性会让 position:fixed; 失效
常见的情形是有时添加一个覆盖整页的mask图层,弹出某些界面的时候。如果body的样式里面设置了任意的transform属性,则会导致
position:fixed;失效。
后续继续收集整理中············