Safari 3D transform变化z-index层级渲染异常

转载于：小杰的简书 https://www.jianshu.com/p/00cde297dc4e

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

请使用Safari浏览器打开：Safari浏览器下3D transform和z-index层级渲染demo
iPhone手机可以扫描下列二维码查看：

效果展示：
正常：

Safari浏览器下：

二：解决方案
方案1：
父级，任意父级，非body级别，设置overflow:hidden
方案2：
不能给父级设置overflow:hidden时，既然“穿越”的渲染问题是由3D transform变换产生的，那么，要解决此问题，我们也可以使用3D transform变换
.bar { position: fixed; z-index: 99;/* 以毒攻毒 */transform: translateZ(100px);}
translateZ可根据自己的需求进行调整