收藏
回答

css3在IOS上渐变显示错误

框架类型 问题类型 操作系统 操作系统版本 手机型号 微信版本
小程序 Bug iOS 所有ios 所有ios 2018.12.20日

- 当前 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


回答关注问题邀请回答
收藏

5 个回答

  • 黄思程
    黄思程
    2018-12-21

    你看下在 safari 下或者微信浏览器下是不是也这样,css 相关的问题一般是由苹果提供的浏览器内核渲染,这个我们也无能为力

    2018-12-21
    有用
    回复 1
    • 937你的歌谣🌞
      937你的歌谣🌞
      2018-12-21

      嗯 谢谢~

      这个似乎是IOS在处理rgba(0,0,0,0);这种透明时处理成了一半的白色吧    不过在H5时IOS是好使的

      2018-12-21
      回复
  • 程杰
    程杰
    2019-04-01

    解决方法

    将rgba()中的前三个参数,设置成背景色的颜色值即可。


    2019-04-01
    有用
    回复 4
    • 937你的歌谣🌞
      937你的歌谣🌞
      2019-04-01

      谢谢,之前试过了,不可以

      2019-04-01
      回复
    • 程杰
      程杰
      2019-04-01回复937你的歌谣🌞

      我遇到了同样的问题,用这样的方法,iOS解决了,可以显示,你css要像这样写

      background:-webkit-linear-gradient(rgba(54,39,56,0),#362738);

      background:-o-linear-gradient(rgba(54,39,56,0),#362738);

      background:-moz-linear-gradient(rgba(54,39,56,0),#362738);

      background:linear-gradient(rgba(54,39,56,0),#362738);



      2019-04-01
      回复
    • 念念不忘,必有回响
      念念不忘,必有回响
      2020-04-30
      不行啊   下边还是被截掉一块
      2020-04-30
      回复
    • akrios
      akrios
      2021-08-04回复念念不忘,必有回响
      把前后2个色值都修改成rgba的模式,就可以了,实测ios没有毛病了
      2021-08-04
      1
      回复
  • 枫
    2019-02-18

    我也遇到了这种情况,在android上面渐变正常,到了IOS上面渐变有时正常有时直接渐变到一半就卡住了,然后就直接全部执行完成了。


    头壳痛啊 ,心好累。

    2019-02-18
    有用
    回复 1
    • 937你的歌谣🌞
      937你的歌谣🌞
      2019-02-19

      嗯  IOS和android 颜色分辨率就不一致 - - 很容易出现白色透明,这种兼容两端的以后还是直接用UI图吧,我也暂时没找到好的方法

      2019-02-19
      回复
  • Ha Ha Ha
    Ha Ha Ha
    2019-01-21

    这个问题在解决了吗? 现在我同样开发工具上实现了CSS3的渐变效果,但IOS真机上就是均匀的半透明,没有渐变。

    2019-01-21
    有用
    回复 3
  • 疯狂的小辣椒
    疯狂的小辣椒
    2018-12-20

    麻烦给个相关的代码片段(https://developers.weixin.qq.com/miniprogram/dev/devtools/minicode.html)

    2018-12-20
    有用
    回复 6
    查看更多(1)
登录 后发表内容