javascript - ios对改变class换div样式这个做法支持得不好？

Question

我改变一个node节点的样式一般是改变它的class以匹配预先写好的css选择器。但是发现ios中，如果一堆可以横向滚动的li，给其中一个li加一个class，让它改变边框颜色，经常会出现bug，比如一个矩形的边框，只有左边一半的区域是变了色的，右半部分还是原来的颜色

比如下面这样，我给下面右边的图片加了个蓝色的边框，同时清除了左边图片的蓝色边框，结果左边图片还残留了一些边框，右边图片的边框又没加全，而且左右滑动这些图片都还是这样，不会自己改正过来。

刚刚有新发现，在第一屏中的li（scrollleft==0时能看见的li），改变class时样式换得很好， 没有问题，但是不在第一屏的li，就会出现下面的问题！

---

我做横向滚动是这样做的：

<p>
    <ul>
        <li><img src="/public/uploads/logimg/2016/1/21/14533839266839560.jpg"></li>
        <li><img src="/public/uploads/logimg/2016/1/21/14533839317243306.jpg"></li>
        <li><img src="/public/uploads/logimg/2016/1/21/14533839367933156.jpg"></li>
        <li class="on"><img src="/public/uploads/logimg/2016/1/21/14533839417157938.jpg"></li>
    </ul>
</p>
<style>
p{
    background: rgba(0,0,0,0.7);
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    overflow-x: auto;
}
ul{
    display: inline;
    word-break: keep-all;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
li{
    width: 100px;
    height: 100px;
    display: inline-block;
    overflow: hidden;
    margin: 8px;
}
li.on{
    border: 3px solid #67ADFF;
    box-sizing: border-box;
}
img{width:100%}
</style>