mac浏览器内核fixed定位下的rotate问题

64 阅读1分钟

最近项目里碰到一个问题,antd的layout.sider中的trigger,在收缩的时候,不见了,很离谱的问题。 看下现象: image.png

image.png

消失的她 看的出来,最大的区别就是transform 我尝试了下rotateX和Y,都会导致消失,Z没问题,这就引导人想到了3D的构思,是不是父元素少了一个perspective属性----加上之后perspective:1000px,果然出现了, 再试试把postiion:fixed去掉,发现,也能解决问题 再试试加个兄弟元素,注意,兄弟元素不要rotateX或者Y,这时候也解了问题 再试试兄弟元素rotateX小一点的deg,发现缺了点东西,展示的不太对: image.png

问题解决:

  1. 去掉父元素的fixed
  2. 父元素加上perspective
  3. 加个无rotateXY的元素原因分析 事实上这是rotate在safari浏览器的兼容问题,但是目前来看,新版本的safari只有在fixed定位下,且子元素全都rotate的情况下才会出现问题。当然,这些都是PC端的情况,移动端还没试过,但是估计效果更差 ​