VR一体机内嵌H5页面兼容性问题汇总

以下问题在PC浏览器和手机浏览器正常，只有在VR一体机中才会出现(问题1-5使用Vue2)

1. 使用 ElementUI 组件 ，在使用Rate 评分组件，在某些空白位置点击会自动滑动到顶部
   解决方案：自定义组件替换Element的组件或者使用其他库，我为了方便直接使用了iView库里面的Rate评分组件。

2. 使用 Video 标签播放视频，在点击暂停后出现一个边框，之前设置的video圆角也全都失效
   解决方案：使用Canvas实现一个视频播放器，并且自定义进度条等按钮。

3. 使用background 图片作为div 的背景，手柄移动到div元素，设置hover时 background-size 为110% 放大图片，某些图片（尺寸较小的图片）会出现抖动
   解决方案：使用img 元素 结合定位 position:absolute 作为背景图片。

4. window.scrollTo 在某些情况下（div1包含div2元素，div2包含div3元素，div3包含很多子元素，点击按钮想要滑动div3）失效
   解决方案：不使用 window 作为滑动对象，用需要滑动的那个元素调用scrollTo 方法

5. A页面使用 <keep-alive> 做缓存后，在A页面滑动到页面底部后进入其他页面，再返回A页面时，发现回到了A页面的顶部
   解决方案：页面滚动时记录一下滚动的距离scrollTop，页面从其他页面返回时，在activated中将页面的滚动距离设置为保存的 scrollTop

6. 在最新版Vue3(3.3.4) Vite版本（4.4.5）中，开发一个一体机内嵌的H5页面，在一体机内部直接打开index.html 页面白屏，但是如果把打包后的index.html 等文件部署到服务端，通过ip 或者域名访问H5文件没有问题，这是因为Vite打包后的js 文件被moudle 修饰，直接在浏览器中打开使用的是file 协议 (file://） 不支持moudle 类型，此时我用了一个js 方法将所有的

7. 在问题6 的开发过程中还出现了一个在电脑端浏览器正常，但是在一体机内部页面白屏的情况，控制台确实报错了，但是报错的内容着实让人看不懂:SyntaxError: Unexpected token . ，最开始以为是兼容性问题，然后使用各种方法兼容低版本浏览器，都不行，最后采用逐步注释的方法发现是