以前工作從沒考慮過safari的兼容問題符隙，現(xiàn)在工作遇到了很多safari下獨特的渲染問題盯仪，有些真得讓人不知如何是好∪淌危現(xiàn)記錄如下绝骚，以備查耐版。
時間解析
因為那個
Invalid Date導(dǎo)致了bug，哪曾想-和/也能產(chǎn)生這么大的區(qū)別压汪。還不是因為自己對Date的知識不足導(dǎo)致的粪牲。看了一篇文章止剖，JavaScript 時間與日期處理實戰(zhàn):你肯定被坑過腺阳，知道了時間格式的標(biāo)準(zhǔn)規(guī)定。
3d transform變換會忽略z-index的層級
這個問題感覺比較隱蔽穿香，一般很難觸發(fā)亭引，我是在做洗牌效果的時候遇到的。在chrome下z-index的渲染效果都挺好皮获，可以明顯看出來上下層疊變換的效果焙蚓，可到了safari下，就沒有效果了魔市。我通過調(diào)試器也沒發(fā)現(xiàn)啥異樣主届，z-index的值都加上了，可看上去沒有層級變化待德。而且還發(fā)現(xiàn)君丁，某種情況下，這些元素的z-index值并不高将宪，但是卻顯示在一個z-index值為999的蒙層之上绘闷。真得太太太詭異了。網(wǎng)上搜索z-index相關(guān)問題時较坛，偶然發(fā)現(xiàn)了張鑫旭的一篇文章：《Safari 3D transform變換z-index層級渲染異常的研究》印蔗，有幸知道為什么了。
在Safari瀏覽器下丑勤，此Safari瀏覽器包括iOS的Safari华嘹，iPhone上的微信瀏覽器，以及Mac OS X系統(tǒng)的Safari瀏覽器法竞，當(dāng)我們使用3D transform變換的時候耙厚，如果祖先元素沒有overflow:hidden/scroll/auto等限制强挫，則會直接忽略自身和其他元素的z-index層疊順序設(shè)置，而直接使用真實世界的3D視角進(jìn)行渲染薛躬。
怪不得看上去俯渤，z-index就像沒有起作用一樣，原來就是沒起作用型宝。接下來關(guān)注的重點就是如何解決這個問題八匠，文章中也給出了兩個方案，第一個就很好用哦：
父級趴酣，任意父級梨树，非body級別，設(shè)置overflow:hidden可恢復(fù)和其他瀏覽器一樣的渲染价卤。
另外劝萤，還有一點需要注意，z-index的取值是整數(shù)慎璧，不管正負(fù)床嫌。
text-size-adjust bug
https://juejin.im/post/5b5c7f84e51d45348a2fef9d
一種會導(dǎo)致元素縮放后模糊的情況
.element {
transform: scale(3);
transition: all 3s ease;
will-change: transform;
}
上面可以實現(xiàn)元素逐漸放大到3倍的動效，will-change: transform; 用來啟動硬件加速的胸私。但是一旦開啟了這個功能厌处，會導(dǎo)致元素縮放結(jié)束后還是模糊的。chrome中并不會有這樣的情況岁疼。
