背景
页面上需要使用antd mobile FloatingBubble组件,但是莫名其妙的在页面上消失了,诡异的是FloatingBubble组件所在Component当成一个独立页面使用的时候正常展示,当成一个子组件嵌套时出现的异常,区别就是当成子组件时外面的父组件使用了antd mobile Swiper组件,通过审查元素没有发现什么特别的属性,通过对可能影响位置或者层叠上下文的属性进行debug 叉掉,发现最终时Swiper组件底层使用了transform属性,而FloatingBubble组件使用的是fixed定位实现
产生原因
父元素使用 transform 导致子元素 fixed 降级为了 absolute,详细解释可以参考张鑫旭的文章(## CSS3 transform对普通元素的N多渲染影响)