【黑板x】项目总结（二）

**** 遇到&解决的问题 ****

• input用flex布局会导致文字无法居中

• 微信浏览器安卓系统下，右端会出现不明滚动条阻挡视线，灰色条时而出现时而隐藏.
  

  不明滚动条阻挡视线

  1. 怀疑div因overflow:scroll或body自然滚动而出现的滚动条。解决：滚动条可以设置样式，找了下隐藏滚动条的做法，添加到页面：

     ::-webkit-scrollbar
     {
        width: 0;
        height: 0;
     }
     

结果：设置之后仍然不能隐藏。

2. 怀疑是页面不合理的part导致。解决：做页面demo，发现body正常滚动不会出现灰色条，于是把页面每个部分都逐一删除，排除正常的页面部分。结果：每个部分排除了之后仍会出现灰色条。
3. 怀疑是js加载导致。做法：把webpack打包出来的bundle.js内容清空，发现不会出现灰色条（稳稳地保证不会出来）确定是js问题导致。于是将入口文件的js逐一排除（这个花了起码一个多钟），找到了出现问题的js，这份js是做一个waiting的等待，其最大的特点是会动态插入DOM节点。
4. 怀疑是DOM插入有误。做法：不插入和插入处理。结果：确实根据插入与不插入而出现与隐藏灰色条。
5. 怀疑是插入的DOM样式问题。做法：插入的DOM结构样式和class都做了相应的修改，终于找到导致的原因：微信端安卓下浏览器用z-index：-1会渲染不当，替换了z-index:-1之后保证灰色条妥妥地不出现。

• float布局的位置出现
• js判断从上一页面是返回还是进入
• 微信端在安卓下video播放后的显示层级很高，无论设z-index多少都没法高过video，微信有个小窗功能，我的手机上小窗视频在关闭了链接还是会出现，还会在系统主页播放，只在微信App清除应用才去掉，这个应该跟设置层级有关，才会导致z-index无效。

• 移动端的视频播放会根据手机系统的播放模式来播放。安卓机A任何视频播放都会横屏放大才能观看，安卓机B能在视频区点击播放直接观看。
  

  安卓机A能播放
  

  安卓机A不能播放
  

  安卓机B能播放
  
  
  

  IOS下的自动播放
  视频video有属性-webkit-playsinline=true设置局部播放，在IOS下会改到局部播放，但是在安卓下仍是按系统的播方式。
  

  IOS下局部播放