一、Safari是新时代的IE6

1 . Safari font-size的px单位和vm单位计算不支持,需要是百分比单位

2 . Safari 渐变,从#fff到transparent会有灰色带,其他浏览器都是白色到透明

3 . Safiari 伪元素hover时候的currentColor不渲染....


二、position时,z-index层级失效

Safari 3D变换会忽略z-index的层级

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


三、解决方案

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

方法2:
以毒攻毒,有时候,页面复杂,我们不能给父级设置overflow:hidden,直接给fixed容器添加transform: translateZ(100px);

传送门(原著链接) : https://www.zhangxinxu.com/wordpress/2016/08/safari-3d-transform-z-index/