CSS3技术奇葩坑总结，持续收集整理更新

在移动开发项目中，由于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;失效。

 

后续继续收集整理中············