最近不是很忙，所以寫的bug也不多，印象最深的是2個關于safari的坑，今天就整理一下，看看你有沒有遇到。
第一個是在百度搜了很久也沒有搜到一個很好的解決方式的問題，堪稱是設計界的老油條，bug界的常青樹，哈哈 ，是我編的啦，其實就是沒找到一個優雅的解決方式，后來一個同事解決了，留下一個帥氣的背影，我覺得方法不難，我們都可以學習一下。
由于是公司的設計圖，不方便暴露，所以就在網上找找相似的圖片，大家在遇到相似的問題，對號入座就好。
一、輸入框input fix固定在底部，當div獲得焦點后，fix失效，底部fix固定的部分會亂跳
經常遇到一個需求就是在頁面底端，fix定位一個div，預留用戶手機號或者評論等的需求，所以，我們按照正常的邏輯去寫，就會出現如下的情況
見過沒？眼熟不？解決沒？是不是笑嘻嘻的找產品改需求去了（機智臉）
來看看解決方式。
先來獲取到底部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，類似如下中
解決方案如下
第一種解決方式是給所有父級設置overflow：hidden；
第二種方式是給z-index的元素，設置 transform: translateZ(100px);
親測好使，這個方法是參考張鑫旭的博客上的解決方案來的，寫的真完美。
最近真的懷疑自己病了，先這樣、
喜歡就點贊，大款可以隨意打賞哦~女媛不易，且走且總結。
