收藏
回答

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


最后一次编辑于  2018-12-20  (未经腾讯允许,不得转载)
回答关注问题邀请回答
收藏

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
      回复
  • 娇华
    娇华
    2018-12-20

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

    2018-12-20
    赞同
    回复 6
    • 937你的歌谣🌞
      937你的歌谣🌞
      2018-12-20

      主要的代码就是截图那样的啊

      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%);

      IOS下  透明白色是白色有一点透明  如上图


      2018-12-20
      1
      回复
    • 娇华
      娇华
      2018-12-20回复937你的歌谣🌞

      我把你的代码片段整理成代码片段,也没复现,iPhone5c 测试正常

      2018-12-20
      回复
    • 937你的歌谣🌞
      937你的歌谣🌞
      2018-12-20回复娇华

      请问 是在真机上测的么?

      2018-12-20
      回复
    • 937你的歌谣🌞
      937你的歌谣🌞
      2018-12-20回复娇华

      https://developers.weixin.qq.com/s/zOYt3NmP7C4i这是代码片段  在IOS真机上有一半的白条

      2018-12-20
      回复
    • 娇华
      娇华
      2018-12-21回复937你的歌谣🌞

      收到,我们看下

      2018-12-21
      回复
    查看更多(1)
  • 程杰
    程杰
    04-01

    解决方法

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


    04-01
    赞同
    回复 2
    • 937你的歌谣🌞
      937你的歌谣🌞
      04-01

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

      04-01
      回复
    • 程杰
      程杰
      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);



      04-01
      回复
  • 生如夏花
    生如夏花
    02-18

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


    头壳痛啊 ,心好累。

    02-18
    赞同
    回复 1
    • 937你的歌谣🌞
      937你的歌谣🌞
      02-19

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

      02-19
      回复
  • HaHaHa
    HaHaHa
    01-21

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

    01-21
    赞同
    回复 3
    • 937你的歌谣🌞
      937你的歌谣🌞
      01-24

      没解决,换方案了

      01-24
      回复
    • HaHaHa
      HaHaHa
      01-24回复937你的歌谣🌞

      请问你有什么好的方案,我干脆直接做了个渐变的png

      01-24
      回复
    • 937你的歌谣🌞
      937你的歌谣🌞
      01-24回复HaHaHa

      可以用图片代替

      01-24
      回复