记一个ios手机的css兼容性问题

1.问题代码

.scroll-bar > span {
    display: inline-block;/*inline样式不能使用动画*/
    animation: scroll 12s linear infinite;
}
.scroll-bar > span:after {
    position: absolute;
    left: 100%;
    content: attr(data-text);
    margin-left: 10%;
}
@keyframes scroll {
    from {
      transform: translateX(0);
    }
    to {
      transform: translateX(-110%);
    }
}

2.问题描述

这样代码我是想在.scroll-bar的div里面实现一个文字横向滚动的动画，在android手机上没问题，在ios手机上页面加载完成以后动画不动，要刷新一下页面才会动

3.问题分析和总结

为什么刷新以后动画就执行了呢？因为刷新以后重新请求了数据，初始化的时候span里面是有文字，span是有宽度的，而第一次进来span里面没数据span是没有宽度的，这样就找到了问题所在。在ios手机上span没有宽度动画是不会执行的，而在android手机不存在这个问题。所以解决方法就是给span加一个最小宽度就行了

.scroll-bar > span {
    min-width: 200px;  //增加这一行代码
    display: inline-block;/*inline样式不能使用动画*/
    animation: scroll 12s linear infinite;
}

欢迎关注「不出户」公众号 

在公众号回复「python」，获取全套python学习资源。

在公众号回复「vue」，领取vue核心教程

在公众号回复「react」，领取react全套教程

在公众号回复「angular」，领取angular学习资源

在公众号回复「算法」，领取算法学习教程

在公众号回复「nodejs」，领取nodejs学习教程，更有更多精品资源敬请期待