页面有一部分直接在谷歌上显示不出来，在火狐正常

Question

页面有一部分直接在谷歌浏览器消失了，在火狐是正常的，这一部分有个滚动动画，查看谷歌浏览器的控制台元素，消失的元素都在，但是在页面上就是没有，
上图火狐，下图谷歌，左右两个球是个间隔动画，隔一定时间两个球交替向左向右滚动，怀疑是不是动画影响了这一部分，但是不应该啊，球下面的文字和线条是一张静态图，
求有经验的朋友指教

html:

<div class="advantage" >
<div class="adv_wrapper">
    <div class="adv_header">
        <div class="line2 horizon2"></div>
        <div class="adv_title horizon2">我们的优势</div>
        <div class="line2 horizon2"></div>
    </div>
    <div class="adv_content">
        <div class="ball_content">
            <div class="ball1 ball">
                <div class="ball1_inner"><img src="images/adv/left.png"></div>
            </div>
            <div class="ball2 ball"></div>
            <div class="ball3 ball">
                <div class="ball3_inner"><img src="images/adv/right.png"></div>
            </div>
        </div>
        <div class="target"></div>
        <div class="target_des">
            <a class="szll item" href="">师资力量</a>
            <a class="zczz item" href="">政策支持</a>
            <a class="yjjs item" href="">引进技术</a>
            <a class="zyhz item" href="">中以合作</a>
        </div>
    </div>
</div>
</div>

css:

.advantage .target{
width: 100%;
height: 340px;
background:url(../images/adv/target.png);
/*border:solid 1px red;*/
}
.target_des{
/*border:solid 1px black;*/
height: 100px;
}
.target_des>.item{
float: left;
font-family: "黑体";
font-size: 18px;
color: rgb(160,160,167);
width: 90px;
height: 30px;
line-height: 30px;
text-align: center;
border-radius: 5px;
/*border:solid 1px red;*/
}
.target_des>.item::after {
content: "";
border-radius: 5px;
position: absolute;
z-index: -1;
top: 0;
left: 0;
width: 100%;
height: 100%;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
opacity: 0;
-webkit-transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
transform: background-color .3s;
}
.target_des>.item:hover {
background-color: rgb(30,148,211);
color: white;
-webkit-transform: scale(1.15, 1.15);
transform: scale(1.15, 1.15);
}

.target_des>.item:hover::after {
opacity: 1;
}
.szll{
display: inline-block;
margin-left: 40px;
margin-right: 165px;
}
.zczz{
display: inline-block;
margin-right: 300px;
}
.yjjs{
display: inline-block;
margin-right: 170px;
}

js:


$(document).ready(function(){
setInterval(function(){
    $(".ball1_inner").addClass("roll-   left").one('animationend',function(){
        $(this).removeClass("roll-left");
        $(".ball3_inner").addClass("roll-right").one('animationend',function(){
            $(this).removeClass("roll-right");
        })
    })
},8000);
})

Answer 1

CSS3 的一些属性，通常需要浏览器标识，如，-webkit-*，-moz-*，所以，请规范你的相关属性和动画定义。
脚本部分可以这样调用:

var $ballOneInner = $('.ball1_inner'),
    rollLeft = 'roll-left';
    
$ballOneInner.addClass(rollLeft)
.one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function(){
    $ballOneInner.removeClass(rollLeft);
})
.fadeIn(600,function(){
    $ballOneInner.removeClass(rollLeft);
});

显示使用 fadeIn，隐藏使用 fadeOut。