H5 文字渐变 换行失效

最近在做一个H5活动，活动简介标题用到了CSS3 的线性渐变，在本地测试电脑上看没有问题  但是在手机上  文字过多导致换行时 发现渐变鲜果失效了 并且第一行虽然不渐变 但是是渐变开始的颜色 ，第二行确实透明色，如下截图

PC端效果：  

手机端效果如下，第二行是文字实际是transparent 下面是因为文字添加了阴影。

 代码如下：

.title{
    font-family: PingFang-SC-Heavy;
    font-size: .533rem;
    line-height: 1.5;
    letter-spacing: .08rem;
    font-weight: bold;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
    -webkit-text-fill-color: transparent;
    background: -webkit-linear-gradient(to right, #d19319, rgba(242, 213, 156, 0.8));
    background: -o-linear-gradient(to right, #d19319, rgba(242, 213, 156, 0.8));
    background: -moz-linear-gradient(to right, #d19319, rgba(242, 213, 156, 0.8));
    background: linear-gradient(to right, #d19319, rgba(242, 213, 156, 0.8));
    -webkit-background-clip: text;
}

<div class="title-con">
    <i class="title-icon title-l"></i>
    <span class="title">来战！噢噢来战！噢噢来战！噢噢来战！</span>
    <i class="title-icon title-r"></i>
</div>

目前暂不知什么原因（哪位前端大神知道望告知）

 

最终解决，将渐变效果放到了父元素title-con上，就实现了文字多行渐变，但是每一行渐变都是独立的，即每一行都是从开始色渐变，并不是连续渐变，效果如下：