为什么这个demo的css在浏览器端和在Safari端显示效果不同？

Question

以下demo，为什么在电脑端可以正常切换图片，但是我用iphone自带的Safari，点击按钮切换时，图片会把按钮覆盖掉？
https://jsfiddle.net/xpu16n9x/

Answer 1

btns{position: fiexd;bottom: 0;right: 0;display: flex;}
btns换成这样试试

Answer 2

chrome移动端没发现问题，试试

#btns {
    z-index:999;
}

Answer 3

应该是 animation 把 li 的渲染层级提升了。可以明文指定 #list & #btns 的 z-index，如下：

#list {z-index: 0;}
#btns {z-index: 1;}

如果不指定层级可以考虑给 #btn 开启 3d 加速也可以把 #btn 的层级提升，如下：

#btns {transform: translateZ(0);}

Answer 4

给按钮设置z-index

Answer 5

调整一下z-index