前端开发中，常见的bug解决方案（二)

最近不是很忙，所以写的bug也不多，印象最深的是2个关于safari的坑，今天就整理一下，看看你有没有遇到。

第一个是在百度搜了很久也没有搜到一个很好的解决方式的问题，堪称是设计界的老油条，bug界的常青树，哈哈 ，是我编的啦，其实就是没找到一个优雅的解决方式，后来一个同事解决了，留下一个帅气的背影，我觉得方法不难，我们都可以学习一下。

由于是公司的设计图，不方便暴露，所以就在网上找找相似的图片，大家在遇到相似的问题，对号入座就好。

一、输入框input fix固定在底部，当div获得焦点后，fix失效，底部fix固定的部分会乱跳

经常遇到一个需求就是在页面底端，fix定位一个div，预留用户手机号或者评论等的需求，所以，我们按照正常的逻辑去写，就会出现如下的情况

bug1.png

见过没？眼熟不？解决没？是不是笑嘻嘻的找产品改需求去了（机智脸）

来看看解决方式。

先来获取到底部fix固定的div的高度，假设这个元素的class名字是item10

var footHeigt = $(‘.item10’).height();

因为只有ios会有这种问题，所以针对ios，当我input获得焦点的时候，

if(navigator.userAgent.indexOf(‘iphone’)){    
 $(‘.item10’).css{         
     position:static;         
     bottom:0px;         
     margin-top:-footerHeight     
}}

当input失去焦点的时候，我们再把它的input定位还原到页面底部

if(navigator.userAgent.indexOf(‘iphone’)){     
    $(‘.item10’).css{          
        position:fix;        
        bottom:0px;     
}}

亲测好使，下次遇到这种需求就霸气的对着产品的脸说so easy。

---

二、在safair中，当transform和z-index一起使用的话会产生z-index失效的情况

有时会做一些css3的的动画与z-index同用，还有的那种下拉刷新和上拉加载的插件中也多会用到这中css3的属性
，所以不经意间就会出现这种问题。

在Safari浏览器下，此Safari浏览器包括iOS的Safari，iPhone上的微信浏览器，以及Mac OS X系统的Safari浏览器，当我们使用3D transform变换的时候，如果祖先元素没有overflow:hidden/scroll/auto等限制，则会直接忽略自身和其他元素的z-index层叠顺序设置，而直接使用真实世界的3D视角进行渲染。

IE, Chrome, FireFox都是遵循这种渲染的，但是，Safari浏览器却自己任性了一把。直接把z-index:99给无视了，对无视了，在座的诸位也不要怀疑是不是99还不够大，就算是998，这也是这般渲染，因为Safari是忽略z-index，而不是IE6,IE7那种z-index计算bug，类似如下中

bug2

解决方案如下
第一种解决方式是给所有父级设置overflow：hidden；
第二种方式是给z-index的元素，设置 transform: translateZ(100px);

亲测好使，这个方法是参考张鑫旭的博客上的解决方案来的，写的真完美。

最近真的怀疑自己病了，先这样、

喜欢就点赞，大款可以随意打赏哦~女媛不易，且走且总结。