ios中页面某一块不显示,点击vconsole后显示,ios下z-index兼容问题

在开发过程中遇到某一块div不显示,但是点击vconsole后之前不显示的div又显示异常,而且这种情况只出现在ios的页面中,排查了好久,最后发现是ios对z-index的兼容问题,应该是命中了下面的某一种情况,导致ios中z-index没有生效,重新设置div的排列顺序可解决:

一.zindex和transform translateZ冲突问题

1.在android上,如果对元素同时设置zindex和transform translateZ的值时,在显示上zindex的优先级要高于translateZ

2.在ios上,则相反,translateZ的优先级要高于zindex

3.所以最好在设置一系列元素时,zindex的值和translateZ的值应该一起逐级增长或逐级减少

二.在全局样式中设置了-webkit-overflow-scrolling: touch,把这条样式注释掉,在需要滑动的地方比如弹窗再加上这条样式

三:多个position:fixed中z-index失效

把多个要position:fixed的元素用div包起来,在这个div设置position:fixed就好了
————————————————
原文链接:https://blog.csdn.net/qappleh/article/details/95636682

猜你喜欢

转载自blog.csdn.net/dhw276/article/details/114259294