Safari下的渲染问题

以前工作从没考虑过safari的兼容问题，现在工作遇到了很多safari下独特的渲染问题，有些真得让人不知如何是好。现记录如下，以备查。

时间解析

safari下的时间解析

chrome下的时间解析

因为那个 Invalid Date导致了bug，哪曾想-和/也能产生这么大的区别。还不是因为自己对Date的知识不足导致的。看了一篇文章，JavaScript 时间与日期处理实战:你肯定被坑过，知道了时间格式的标准规定。

3d transform变换会忽略z-index的层级

这个问题感觉比较隐蔽，一般很难触发，我是在做洗牌效果的时候遇到的。在chrome下z-index的渲染效果都挺好，可以明显看出来上下层叠变换的效果，可到了safari下，就没有效果了。我通过调试器也没发现啥异样，z-index的值都加上了，可看上去没有层级变化。而且还发现，某种情况下，这些元素的z-index值并不高，但是却显示在一个z-index值为999的蒙层之上。真得太太太诡异了。网上搜索z-index相关问题时，偶然发现了张鑫旭的一篇文章：《Safari 3D transform变换z-index层级渲染异常的研究》，有幸知道为什么了。

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

怪不得看上去，z-index就像没有起作用一样，原来就是没起作用。接下来关注的重点就是如何解决这个问题，文章中也给出了两个方案，第一个就很好用哦：

父级，任意父级，非body级别，设置overflow:hidden可恢复和其他浏览器一样的渲染。

另外，还有一点需要注意，z-index的取值是整数，不管正负。

text-size-adjust bug

https://juejin.im/post/5b5c7f84e51d45348a2fef9d

一种会导致元素缩放后模糊的情况

.element {
  transform: scale(3);
  transition: all 3s ease;
  will-change: transform;  
}

上面可以实现元素逐渐放大到3倍的动效，will-change: transform; 用来启动硬件加速的。但是一旦开启了这个功能，会导致元素缩放结束后还是模糊的。chrome中并不会有这样的情况。