最近不是很忙，所以写的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);
亲测好使，这个方法是参考张鑫旭的博客上的解决方案来的，写的真完美。
最近真的怀疑自己病了，先这样、
喜欢就点赞，大款可以随意打赏哦~女媛不易，且走且总结。
网友评论
$(".item").css(
{
"position":"static",
"bottom":"0",
"margin-top":"-footerHeight"
}
)
}
if(navigator.userAgent.indexOf('iphone')){
$(".item").css(
{
"position":"absolute",
"bottom":"0"
}
)
}
经过测试 在ios11 微信 safari里并没有作用 之前我也研究过 甚至用了微信官方提供的方案 ->
$("input").on("focus", function() {
if(/Android/gi.test(navigator.appVersion)) {
window.addEventListener("resize", function() {
if(document.activeElement.tagName=="INPUT" || document.activeElement.tagName=="TEXTAREA") {
window.setTimeout(function() {
document.activeElement.scrollIntoView();
},500);
}
})
}
})
其实百度首页也这样 只是它的input在中间 问题不明显而已
$("input").on("focus", function() {
var target = this;
setTimeOut(function() {
target.scrollIntoView(true);
}, 500);
})
$('input').on('focus' , function(){
$(window).resize();
}).on('blur' , function() {
$(window).resize();
});
我还用过这方案 也不好使 但神奇的是 只要把input type的类型改为 tel 就可以了
第一个bug是输入框改成绝对定位，内容区加底部padding做的；第二个bug原因是transform会新建一个图层吧，而z-index只会作用于当前图层。也是看的张鑫旭博客解决的。