1***@qq.com
1***@qq.com
  • 发布:2026-10-29 10:26
  • 更新:2026-10-29 10:28
  • 阅读:55

【报Bug】:App-Android 端进入页面后 position:fixed 悬浮按钮偶发不显示(HBuilderX 5.x 回归,4.x 正常)

分类:uni-app

产品分类: uniapp/App

PC开发环境操作系统: Windows

PC开发环境操作系统版本号: window11

HBuilderX类型: 正式

HBuilderX版本号: 5.33

手机系统: Android

手机系统版本号: Android 16

手机厂商: 小米

手机机型: 小米14

页面类型: vue

vue版本: vue3

打包方式: 云端

项目创建方式: HBuilderX

示例代码:
/ pages/index/index  

<template>  
    <view>  
        <button style="margin-top: 500rpx;"  
            @click="go">进入测试页(反复进出10~20次)</button>  
    </view>  
</template>  

<script>  
    export default {  
        data() {  
            return {}  
        },  
        onLoad() {  

        },  
        methods: {  
            go() {  
                uni.navigateTo({  
                    url: '/pages/index/list'  
                })  
            }  
        }  
    }  
</script>  

<style>  

</style>  

/pages/index/list  
<template>  
    <view style="margin-bottom: 160rpx;">  
        <!--自定义导航栏:fixed + 全宽 + z-index 1024 + 阴影 + 渐变 -->  
        <view class="cu-custom" :style="{ height: CustomBar + 'px' }">  
            <view class="cu-bar-fixed bg-gradual-blue"  
                :style="'height:' + CustomBar + 'px;padding-top:' + StatusBar + 'px;'">  
                <view class="action">‹ 返回</view>  
                <view class="content" :style="{ top: StatusBar + 'px' }">商品</view>  
                <view class="action">  
                    <button class="nav-btn">添加商品</button>  
                </view>  
            </view>  
        </view>  

        <!-- 排序栏 fixed z-index 999 -->  
        <view class="order-bar">  
            <text style="flex: 1;text-align: center;">默认倒序</text>  
            <text style="flex: 1;text-align: center;">名称排序</text>  
            <text style="flex: 1;text-align: center;">价格排序</text>  
            <text style="flex: 1;text-align: center;">数量排序</text>  
        </view>  

        <!-- 搜索栏 fixed z-index 999 -->  
        <view class="search-bar">  
            <input placeholder="商品名称/规格/条码" style="flex: 1;font-size: 30rpx;" />  
            <text style="padding: 0 20rpx;">搜索</text>  
        </view>  

        <!-- 普通内容,撑出滚动 -->  
        <view style="margin-top: 200rpx;">  
            <view v-for="item in 100" :key="item"  
                style="display: flex;align-items: center;padding: 20rpx;border-bottom: 1rpx solid #eee;">  
                <image src="@/static/logo.png"  
                    style="width: 80rpx;height: 80rpx;"></image>  
                <text style="margin-left: 20rpx;">商品 {{ item }}</text>  
            </view>  
        </view>  

        <!-- 悬浮按 -->  
        <view class="float-wrap">  
            <button class="float-btn">选好了</button>  
        </view>  
    </view>  
</template>  

<script>  
    export default {  
        data() {  
            return {  
                StatusBar: 0,  
                CustomBar: 0  
            }  
        },  
        onLoad() {  
            const e = uni.getSystemInfoSync()  
            this.StatusBar = e.statusBarHeight  
            this.CustomBar = e.statusBarHeight + (e.platform == 'android' ? 50 : 45)  
        },  
        methods: {  

        }  
    }  
</script>  

<style>  
    .cu-custom {  
        display: block;  
        position: relative;  
    }  

    .cu-bar-fixed {  
        display: flex;  
        position: fixed;  
        width: 100%;  
        top: 0;  
        z-index: 1024;  
        box-shadow: 0 1rpx 6rpx rgba(0, 0, 0, 0.1);  
        align-items: center;  
        justify-content: space-between;  
        box-sizing: border-box;  
    }  

    .bg-gradual-blue {  
        background-image: linear-gradient(45deg, #0081ff, #1cbbb4);  
        color: #ffffff;  
    }  

    .cu-bar-fixed .action {  
        display: flex;  
        align-items: center;  
        margin: 0 30rpx;  
        font-size: 30rpx;  
    }  

    .cu-bar-fixed .content {  
        position: absolute;  
        text-align: center;  
        width: calc(100% - 340rpx);  
        left: 0;  
        right: 0;  
        bottom: 0;  
        top: 0;  
        margin: auto;  
        overflow: hidden;  
        text-overflow: ellipsis;  
        white-space: nowrap;  
    }  

    .nav-btn {  
        border: 1rpx solid #ffffff;  
        border-radius: 5000rpx;  
        color: #ffffff;  
        background-color: transparent;  
        font-size: 24rpx;  
        height: 56rpx;  
        line-height: 56rpx;  
        padding: 0 24rpx;  
    }  

    /* ==== 正式页面另外两个 fixed 栏 ==== */  
    .order-bar {  
        position: fixed;  
        width: 100%;  
        z-index: 999;  
        height: 100rpx;  
        display: flex;  
        align-items: center;  
        background-color: #fff;  
    }  

    .search-bar {  
        position: fixed;  
        width: 100%;  
        z-index: 999;  
        margin-top: 100rpx;  
        display: flex;  
        align-items: center;  
        background-color: #fff;  
        height: 90rpx;  
        padding: 0 20rpx;  
        box-sizing: border-box;  
    }  

    /* ==== 悬浮按钮==== */  
    .float-wrap {  
        position: fixed;  
        bottom: 10rpx;  
        right: 10rpx;  
        display: flex;  
        z-index: 999;  
        transform: translateZ(0);  
    }  

    .float-btn {  
        background-color: #0081ff;  
        color: #ffffff;  
        font-size: 32rpx;  
        height: 80rpx;  
        line-height: 80rpx;  
        padding: 0 40rpx;  
    }  
</style>

操作步骤:
  1. 下载附件最小 demo(uniapp-bug01),HBuilderX 5.x 真机运行到小米手机;
  2. 首页点击“进入测试页”,再返回;
  3. 反复进出 10~20 次;
  4. 观察:右下角“选好了”悬浮按钮偶尔不显示。

预期结果:

每次进入页面,悬浮按钮都正常显示。

实际结果:

偶发(约 10%~20% 概率)按钮不渲染,无报错日志。(录屏和源代码在附件)

关键线索(帮助定位):

  1. 页面结构:顶部自定义导航栏(position: fixed; width: 100%; z-index: 1024; box-shadow; 渐变背景)+ 两个 z-index: 999 的 fixed 栏 + 悬浮按钮(position: fixed);
  2. 注释掉导航栏后问题消失;
  3. HBuilderX 4.36编译同代码无此问题,5.x 出现。

bug描述:

小米手机澎湃OS3系统:进入页面后,页面右下角一个 position: fixed 的悬浮按钮偶发不渲染(约 10 次出现 1~2 次),页面其他内容正常。通常滚动页面或触发一次重绘后按钮会重新出现。相同代码在 HBuilderX 4.36编译运行完全正常,升级到 5.x 后出现,疑似渲染层回归问题。  

自用的华为手机不会出现这样的问题。

初步判断:fixed 元素(z-index:1024 + 阴影/渐变)触发合成层提升后,同页另一个未提升的 fixed 元素在 webview 首帧绘制时存在时序竞态,导致偶发漏绘。

2026-10-29 10:26 负责人:无 分享
已邀请:
Ask小助手

Ask小助手 - Ask社区AI助手

欢迎到专业群( uni-app 官方技术交流群 1 ) 咨询,群中有相关专业的管理员和群友。

感谢提供这份 bug 反馈,以下从官方受理角度对反馈内容和问题成立性给出评审意见。

一、反馈完整性评审

整体来看,这份反馈质量较高,要素齐全:

  1. 标题:清晰,明确了平台(App-Android)、现象(position:fixed 悬浮按钮偶发不显示)和版本关联(5.x 回归、4.36 正常),便于快速归类。
  2. 问题描述:详细且有定位价值,包含了偶发概率(约 10 次 1~2 次)、恢复方式(滚动或触发重绘后恢复,说明元素在布局中存在、仅绘制缺失)、版本对照(4.36 正常 / 5.33 复现)、设备对照(小米14 复现、华为 Android 4.2 未复现)、关键线索(注释掉导航栏后问题消失)。这些信息对官方复现和定位都很重要。
  3. 代码示例:两个页面的模板、脚本、样式完整,逻辑自洽,基本可直接运行。有两点小补充建议:
    • 未附 pages.json 配置,请确认 list 页面已在 pages.json 中注册,并补充该页面的窗口配置(如 navigationStyle 等),避免受理人员复现时页面形态不一致;
    • 代码引用了 @/static/logo.png,请确认最小 demo 中包含该静态资源。
  4. 复现步骤:清晰可操作,“反复进出 10~20 次”与偶发概率描述匹配,按步骤复现的可行性较高。
  5. 预期结果:合理,fixed 元素每次进入页面均应正常渲染。
  6. 实际结果:描述明确,说明了无报错日志,并提供了录屏与源码。
  7. 分类信息:完整(Windows 11、HBuilderX 5.33 正式版、Android 16、Vue3、小米14)。

需要提醒:我无法识别附件内容(录屏与 demo 压缩包),请在反馈正文中以文字/代码形式补充关键信息,确保受理人员可以直接复现。

建议补充的信息:

  • HBuilderX 5.x 中具体测试过哪些版本(例如 5.0~5.32 中哪些版本可复现),有助于锁定回归引入的具体版本;
  • 使用标准基座还是自定义基座/离线打包;
  • 如条件允许,补充一台中高版本 Android 的非小米设备对照结果(华为 Android 4.2 的 webview 内核与小米14 差异极大,该对照的参考价值有限)。

二、bug 成立性分析(基于知识库检索)

  1. 在官方发布记录中,未检索到 HBuilderX 5.x 关于 vue 页面(webview 渲染)position:fixed 元素偶发不渲染的已知问题或修复记录,暂无法确认这是官方已定性的回归问题。
  2. ask 社区存在相似的 fixed 定位元素渲染异常反馈:【报Bug】固定定位的元素在页面滚动时内容闪烁(Android 14、华为设备、vue2,现象为滚动时 fixed 元素内容闪烁),说明 App 端 webview 渲染下 fixed 元素在部分 Android 设备上存在渲染类问题的先例;该帖回复中曾建议“确保定位元素和主体是同级”的结构调整思路,可作为排查参考,但并非官方定论。
  3. ISSUE 系统中有一条定位类渲染问题处于“待确认”状态:在整页能滚动的页面的顶部view元素设置sticky定位top为0后,滚动一段距离后,定位的元素就被顶上去了,仅说明定位类渲染问题存在待确认案例,不能作为本问题成立的依据。
  4. 历史版本记录中存在 nvue 渲染相关的修复(如 box-shadow 渲染逻辑优化等),但均为 nvue 原生渲染场景,与本例 vue 页面的 webview 渲染机制不同,不能直接类比。

综合判断:该反馈具备较高的可信度——有稳定的复现概率、有版本对照、有设备对照、有最小化排查线索(注释导航栏可规避)、实际结果描述(无报错、重绘后恢复)符合渲染层问题的特征,值得官方跟进复现验证。但需要说明的是,“合成层提升 + 首帧绘制时序竞态”目前属于你的合理推测,需官方结合录屏与代码在小米14(澎湃OS3/Android 16)上实际复现后才能定性,暂不能直接认定为已知回归 bug。

三、后续建议

  1. 建议将本反馈提交至 ask 社区(https://ask.dcloud.net.cn/)并附上录屏与最小 demo,便于官方工程师跟进处理;
  2. 你已定位到“注释掉导航栏后问题消失”,建议在此基础上继续收敛触发条件(如分别验证去掉 box-shadow、渐变背景、translateZ(0)、调整 z-index 层级组合后的表现),进一步缩小触发样式的最小集合,这将显著提升官方复现与定位效率;
  3. 补充上文提到的版本区间测试情况、基座类型、pages.json 配置等信息。
内容为 AI 生成,仅供参考

要回复问题请先登录或注册