记一个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学习教程，更有更多精品资源敬请期待