7***@qq.com
7***@qq.com
  • 发布:2021-09-10 13:59
  • 更新:2021-09-15 16:11
  • 阅读:47

【报Bug】安卓 video 原生组件 全屏然后收起 视窗高度变高了 包括了安卓底部虚拟导航栏的高度

分类:uni-app

产品分类: uniapp/App

PC开发环境操作系统: Windows

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

HBuilderX类型: 正式

HBuilderX版本号: 3.2.6

手机系统: Android

手机系统版本号: Android 9.0

手机厂商: vivo

手机机型: X27

页面类型: vue

nvue编译模式: fast

打包方式: 离线

项目创建方式: HBuilderX

操作步骤:

进入带video 页面
点击 全屏 再退出全屏
视窗的高度包括了底部导航栏的高度

预期结果:

视窗的高度不发生变化

实际结果:

视窗的高度发生变化

bug描述:

安卓 video 全屏之前视窗高度正常,进入全屏再退出后,uniapp整个视窗的高度包括了安卓虚拟导航栏。导致虚拟导航栏遮挡了页面下方的内容]

https://github.com/dcloudio/uni-app/issues/2882

2021-09-10 13:59 负责人:DCloud_Android_DQQ 分享
已邀请:
DCloud_Android_DQQ

DCloud_Android_DQQ

我用hello uni复现不了你说的问题。 能提供一个demo吗

  • 7***@qq.com (作者)

    你只需要在带video的底部写个fixed元素,就能复现这个问题(底部导航覆盖住了底部的元素)

    2021-09-15 16:09

7***@qq.com

7***@qq.com (作者)

s-popup 是个fixed 元素 定位到页面底部; 你只需要在带video的底部写个fixed元素,就能复现这个问题(底部导航覆盖住了底部的元素)。


<template>  
<div class="app" catchtouchmove="true" >  
    <video v-if="Url" id="video" :autoplay="true" :src="Url" :direction="0">  
    </video>  
    <s-popup :maskEnable="false" v-if="Url"/>  
</div>  
</template>  

<script lang="ts" src="./main.ts">  

</script>  

<style lang="less">  
.app {  
    height: 100vh;  
    width: 100vw;  
    overflow: hidden;  
    position: relative;  
    background-position: center top;  
    background-size: cover;  
    &::after{  
        content: '';  
        display: block;  
        height: 100%;  
        width: 100%;  
        position: absolute;  
        top: 0;  
        left: 0;  
        background: inherit;  
        filter: blur(20px)  brightness(0.9);  
        transform: scale(1.2);  
        z-index: -1;  
    }  
    video{  
        z-index: 11;  
        width: 100%;  
        height: calc(100vh - 298rpx);  
        padding-bottom: 0;  
    }  
}  
</style>  

要回复问题请先登录注册