chrome文字渐变色下使用countup.js无法实现数字跳动效果

chrome下文字渐变效果

image.png

实现的关键代码如下，网上都有，不贴实现原理了：

    background-image: -webkit-linear-gradient(0deg, #06A0BF 0%, #65DBF2 82%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;

实现countup.js文字跳动效果

如下是countup.js实现的在线demo http://www.html580.com/11025/demo

countup + 文字渐变的坑

如果是这两者结合使用，一不小心就会碰到大坑。

   .ss{
    background-image: -webkit-linear-gradient(0deg, #06A0BF 0%, #65DBF2 82%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-family: Impact;
    font-size: 29px;
    vertical-align: sub;
    margin-right: 13px;
    }
<div id="countup" class="ss"></div>

image.png

页面实际展示0 ，html页面结构实际值12333，随便关注一下右侧样式是渐变色代码。what？玄学？
百思不得其解，后来到处找原因，终于发现了解决办法。
实现的思路就是把当前样式不直接用id或者class挂在countup元素上，而是通过parent child的css结构来实现。废话不多说，上代码：

.ss span{
    background-image: -webkit-linear-gradient(0deg, #06A0BF 0%, #65DBF2 82%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-family: Impact;
    font-size: 29px;
    vertical-align: sub;
    margin-right: 13px;
    }

<div class="ss"><span id="countup"></span></div>

demo实现的关键代码如下：

<div class="ss"><span id="countup"></span></div>
        <script>
            function aa() {
                var options = {
                    useEasing: true,
                    useGrouping: true,
                    separator: ',',
                    decimal: '.',
                };
                var demo = new CountUp("countup", 0, 0, 0, 1.5, options);
             
                if (!demo.error) {
                    demo.start();
                }
                // setTimeout(() => {
                    demo.update(12333);
                // }, 3000);
            }
        </script>
          .ss span{
    background-image: -webkit-linear-gradient(0deg, #06A0BF 0%, #65DBF2 82%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-family: Impact;
    font-size: 29px;
    vertical-align: sub;
    margin-right: 13px;
    }