问题描述:【稳定复现】华为手机微信内置浏览器内,使用webgl2加载模型,将一个mp4文件通过HTMLVideoElement处理后交给webgl2渲染,HTMLVideoElement的画面会出现异常抖动。(经验证,该抖动是由于得到的帧画面乱序导致的,即应该以1-2-3-4-5的预期顺序逐一出现的画面,实际是以1-2-3-5-4的错误顺序出现的)
实验设备:HUAWEI Mate 30 Pro 5G(在许多华为手机上可稳定复现,例如HUAWEI Mate 30 Pro,Nova 6等)
微信版本号8.0.33,内置浏览器userAgent如下
实验设置:Webgl2设置preserveDrawingBuffer为true
实验链接:https://beta-h5.xverse.cn/bug-report/obj/index.html
复现方式:使用华为手机微信打开实验链接,等待资源加载完毕,即左侧canvas出现蓝色模型后,点击屏幕开始视频播放,观察视频流即可。
实验结果:微信内置浏览器观察到明显的视频乱序,企业微信内置浏览器正常。(当preserveDrawingBuffer为false时,微信内置浏览器和企业微信内置浏览器都正常)
实验视频:
微信内置浏览器异常
企业微信内置浏览器正常
---------------------------------------------------------------------------------------------------------------------------------------------
补充一下微信内置浏览器视频中明显乱序的时间点:0:24、0:29
------------------------------------------------2023/04/06-----------------------------------------------------------------------------
在webgl2的延伸使用场景(即如下链接:https://uat-h5.xverse.cn/finance/dev/finance/index.html),上面提到的规避措施preserveDrawingBuffer=false失效,依然出现了严重的乱序的问题。在企业微信和华为内置浏览器中依然正常。
------------------------------------2023/04/07------------------------------------------------------------
接昨日,经排查是由于前端的div中css设置了backdrop-filter导致的。将这个改动放到webgl2的demo中也出现了同样的现象。
对照组:https://beta-h5.xverse.cn/bug-report/obj/index_raf.html
实验组:https://beta-h5.xverse.cn/bug-report/obj/index_raf_backdrop.html
实验方式:微信中打开链接,等待加载(时间可能比较长),加载完成后屏幕上会出现蓝色的球,此时点击屏幕任意位置即可开始播放视频。
实验描述:
对照组: 加载一个58w面的模型,使用requestAnimationFrame渲染。创建一个VideoElement,将src设置为一个视频,放到webgl2中渲染,同时在屏幕右上角显示该VideoElement查看画面。
视频文件:https://beta-h5.xverse.cn/bug-report/sample_25fps.mp4
实验组:在对照组的基础上,在<body>中增加了一行带有backdrop-filter的div。增加后body代码如下:
实验结果:
对照组没有出现VideoElement乱序,实验组出现了VideoElement乱序。重复进行三次,现象均一致。
实验录屏:
你好,点击http://debugxweb.qq.com/?check_xwalk_update& ,更新下内核试试,更新后会不会还有这个问题呢?