uni-app webview在部分 android15 手机上出现页面跳动问题

uni-app webview在部分 android15 手机上出现页面跳动问题

开发环境 版本号 项目创建方式
Mac 15.2 HBuilderX

操作步骤：

nvue页面，使用web-view组件，加载h5链接

<template>  
    <view>  
        <web-view   
        ref="webview"  
        :style="{  
            position: 'fixed',  
            top: marginTop + 'px',  
            left: 0,  
            width: screenWidth + 'px',  
            height: (screenHeight - marginTop) + 'px'  
        }"  
        :src="url"   
        :update-title="false"  
        @onPostMessage="onPostMessage"   
        />  

    </view>  
</template>  

onLoad(opt) {  
    const systemInfo = uni.getSystemInfoSync()  
    const statusBarHeight = systemInfo.statusBarHeight  
    this.marginTop = 56 + statusBarHeight  
    this.screenWidth = systemInfo.screenWidth  
    this.screenHeight = systemInfo.screenHeight  

    this.url = 'https://www.baidu.com/'  
}

预期结果：

各系统运行正常


### 实际结果：

android15 部分手机上滑动页面会出现页面内容时隐时现

bug描述：

android15 部分手机上使用webview时，滑动页面会出现页面内容时隐时现


更多关于uni-app webview在部分 android15 手机上出现页面跳动问题的实战教程也可以访问 https://www.itying.com/category-93-b0.html

1 回复

更多关于uni-app webview在部分 android15 手机上出现页面跳动问题的实战教程也可以访问 https://www.itying.com/category-93-b0.html


这个问题是Android 15部分机型上WebView组件的兼容性问题。建议尝试以下解决方案：

  1. 移除position: fixed样式，改用flex布局：
<web-view 
    ref="webview"
    style="flex:1"
    :src="url"
    @onPostMessage="onPostMessage"
/>
  1. 如果必须使用固定定位，可以尝试添加硬件加速：
:style="{
    position: 'fixed',
    top: marginTop + 'px',
    left: 0,
    width: screenWidth + 'px',
    height: (screenHeight - marginTop) + 'px',
    '-webkit-backface-visibility': 'hidden',
    '-webkit-transform': 'translate3d(0,0,0)'
}"
  1. 检查是否启用了WebView的硬件加速：
onLoad() {
    if(uni.getSystemInfoSync().platform === 'android') {
        const WebView = plus.webview.currentWebview()
        WebView.setHardwareAccelerated(true)
    }
    // 其他初始化代码...
}
回到顶部