eliauk
eliauk
  • 发布:2020-12-26 18:16
  • 更新:2022-09-22 10:55
  • 阅读:1424

【报Bug】在nvue中overflow: hidden无效

分类:uni-app

产品分类: uniapp/App

PC开发环境操作系统: Windows

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

HBuilderX类型: 正式

HBuilderX版本号: 2.9.8

手机系统: Android

手机系统版本号: Android 8.1

手机厂商: 小米

手机机型: mI 5x

页面类型: nvue

nvue编译模式: fast

打包方式: 云端

项目创建方式: HBuilderX

操作步骤:

是一个view里包含着图片,view宽高200,图片宽高200,设置view和图片border-radius:100。下面那个透明黑是absolute,bottom:0,left:0。

预期结果:

黑色半透明背景会被正常隐藏

实际结果:

真机显示没有被父级遮盖,显示长方形

bug描述:

附件的截图,是一个view里包含着图片,view宽高200,图片宽高200,设置view和图片border-radius:100。下面那个透明黑是absolute,bottom:0,left:0。真机显示没有被父级遮盖。显示长方形。,, nvue或者说weex不是默认overflow:hidden的吗,为什么出现这种情况。

2020-12-26 18:16 负责人:DCloud_Android_ST 分享
已邀请:
5***@qq.com

5***@qq.com

还没修复吗

tuzi

tuzi - 90后前端

居然还没修复

DCloud_UNI_Anne

DCloud_UNI_Anne

eliauk

eliauk (作者) - 挺好的

<template>  
    <view class="content">  
        <view class="box">  
            <text class="text"></text>  
        </view>  

    </view>  
</template>  

<script>  
    export default {  
        data() {  
            return {  
                title: 'Hello'  
            }  
        },  
        onLoad() {  

        },  
        methods: {  

        }  
    }  
</script>  

<style>  
    .content {  
        flex-direction: column;  
        align-items: center;  
        justify-content: center;  
    }  

    .box{  
        height: 200rpx;  
        width: 200rpx;  
        border-radius:50%;  
        position: relative;  
        overflow: hidden;  
        background-color: #C0C0C0;  
    }  

    .text{  
        width: 200rpx;  
        height: 60rpx;  
        position: absolute;  
        bottom: 0;  
        left: 0;  
        background-color: rgba(0,0,0,.5);  
    }  
</style>  
eliauk

eliauk (作者) - 挺好的

在iOS上显示正常

1***@qq.com

1***@qq.com

现在也还没有修复

z***@qq.com

z***@qq.com

居然还没修复

w***@126.com

w***@126.com

为什么还没修复

9***@qq.com

9***@qq.com

为什么还没修复为什么还没修复为什么还没修复为什么还没修复为什么还没修复为什么还没修复

e***@163.com

e***@163.com

3.4.6版本正常了然后3.4.6以后又不正常了

jimu

jimu

我这边也是, ios 没有问题, android 就是overflow 无效, 为了解决swiper在nvue竖向滚动不流畅的问题,我自己写了个轮播图, 结果用ios 都正常,android就是不正常, 最后确定是最外层的overflow没有生效的原因。

但是奇怪的是, 有别的nvue页面使用了overflow 又有效的。难道是几率无效?

苍山暮色烟雨迟

苍山暮色烟雨迟

nvue 如果设置宽度为

flex:1;

或者

position:  absolute  ;  
top: 0;left: 0;right: 0;bottom: 0;

这个时候安卓设置圆角就无效了... 但是ios正常

a***@yiquhudong.com

a***@yiquhudong.com

现在在android端使用还是无效

1***@qq.com

1***@qq.com

牛皮 还没有修复

lostyouth

lostyouth

还没修复[狗头]

要回复问题请先登录注册