- 当前 Bug 的表现（可附上截图）

渐变色在ios上显示有白条

  第一张图为IOS下显示效果（IOS都是这个白条效果）

第二张图是android 效果   最后一行渐变色正常

- 复现路径

wxml

<view class='cardDetails'>

<view class='card-info'>

<text class='card-title'>技能描述</text>

<view id='cardText' class='card-text {{overflowHiding?"textHide":"textShow"}}' catchtap='overflowHidingFn'><text>{{card.cardDescription}}</text></view>

<!-- 透明遮罩层    主要显示错误位置-->

<view class='hide-article-box' wx:if="{{overflowHiding}}">

</view>

<!-- 透明遮罩层    主要显示错误位置    end-->

</view>

<image src='{{card.cardImg}}' lazy-load="true" mode='{{imgMode}}' bindload="imgLoadFinish" class='card-img'></image>

</view>

wxss

.cardDetails {background-color: #FFBA17;display: flex;flex-direction: row;justify-content: space-between;padding: 66rpx 42rpx;

}

.card-info {font-size: 30rpx;position: relative;}

.card-title {background-color: #FF8518;text-align: center;padding: 8rpx 20rpx;border-radius: 60rpx;box-sizing: border-box;font-size: 34rpx;display: block;width:178rpx;}

.card-text {max-width: 470rpx;line-height: 1.4;margin-top: 26rpx;}

/* -------- 溢出隐藏 */

.textShow {overflow: auto;-webkit-line-clamp: 40;}

.textHide { overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 4;-webkit-box-orient: vertical;}

/* 文本透明渐变色            主要显示错误 css  代码  -------------------     */

.hide-article-box {

position: absolute;z-index: 300;bottom: -1px;width: 100%;

height: 40rpx;

/* padding-top: 20px; */

background-image: linear-gradient(-180deg,rgba(255,255,255,0) 30%,#FFBA17 100%);

background-image: -webkit-linear-gradient(-90deg,rgba(255,255,255,0) 30%,#FFBA17 100%);

}

- 提供一个最简复现 Demo