最近项目里碰到一个问题,antd的layout.sider中的trigger,在收缩的时候,不见了,很离谱的问题。
看下现象:
消失的她
看的出来,最大的区别就是transform
我尝试了下rotateX和Y,都会导致消失,Z没问题,这就引导人想到了3D的构思,是不是父元素少了一个perspective属性----加上之后perspective:1000px,果然出现了,
再试试把postiion:fixed去掉,发现,也能解决问题
再试试加个兄弟元素,注意,兄弟元素不要rotateX或者Y,这时候也解了问题
再试试兄弟元素rotateX小一点的deg,发现缺了点东西,展示的不太对:
问题解决:
- 去掉父元素的fixed
- 父元素加上perspective
- 加个无rotateXY的元素原因分析 事实上这是rotate在safari浏览器的兼容问题,但是目前来看,新版本的safari只有在fixed定位下,且子元素全都rotate的情况下才会出现问题。当然,这些都是PC端的情况,移动端还没试过,但是估计效果更差