手机兼容bug汇总

我会带着你远行 2022-01-10 15:49 304阅读 0赞

1.  问题：ios6s手机，初始化是动态的控制按钮显示，按钮的样式显示不出来，但是点击按钮位置还会触发相对应的事件

html
    	<div class="btn-group">
    		<button class="btn1 none">按钮一</button>
    		<button class="btn2 none">按钮二</button>
    		<button class="btn3 none">按钮三</button>
    	</div>
    	css
    	.btn-group{
    		display:flex;
    	}
    	.none{
    		display:none;
    	}
    	js
    	btnFun(num){
    		$('.btn-group>button).addClass('none')
    		$('.btn'+num).removeClass('none)
    	}

初始化的时候，按钮不显示，但是操作一下其他操作，触发dom重新渲染，就可以正常显示了，或者最开始的时候，先让所有的按钮都显示，然后再操作，根源问题就是，当初始化的时候flex的没有子节点，就渲染不出来，  
TODO：还没有细致的了解最终原因，现象原因就是没有dom渲染  
解决方案就是强制进行dom渲染，方法很简单，重新修改一下样式属性，如（$(’.btn-group’),attr(\{style:‘background:red’\})），dom就会重新渲染  
两个待解决的问题：1flex为什么不会触发渲染，2修改属性为啥会触发渲染

2、ios6s，设置了position:fixed，没有生效，有其他类型的手机生效  
解决方案是，给父级节点设置了position:relative;z-index:100;解决的，问题感觉是网上说的z-index从父原则，感觉还有渲染顺序的问题，因为我这个没有生效的节点是后来的组件，有可能是这个问题，稍后详细研究一下；  
[https://www.cnblogs.com/shuaishuailu/p/5914719.html][https_www.cnblogs.com_shuaishuailu_p_5914719.html]  
[https://blog.csdn.net/waaa\_fool/article/details/81535748][https_blog.csdn.net_waaa_fool_article_details_81535748]  
[https://www.jianshu.com/p/046f1b7e3b00][https_www.jianshu.com_p_046f1b7e3b00]

3、android低版本手机，识别不了es6的Set对象  
解决方案：引入polyfill.js

npm install --save babel-polyfill

[https_www.cnblogs.com_shuaishuailu_p_5914719.html]: https://www.cnblogs.com/shuaishuailu/p/5914719.html
[https_blog.csdn.net_waaa_fool_article_details_81535748]: https://blog.csdn.net/waaa_fool/article/details/81535748
[https_www.jianshu.com_p_046f1b7e3b00]: https://www.jianshu.com/p/046f1b7e3b00