多个背景图像，不同的元素重叠

Question

为了获得更好的用户体验，我将空的个人资料图像显示为背景，直到加载真实的个人资料图片为止。我正在使用doc here来实现此行为，如下面的屏幕截图所示：

Multiple Backgrounds feature

html 类似于：

RoutineEffect

CSS 类似于：

<ul>
    <li><span id='span-id' class="img-circle profile-image"><span></li>
    <li ...
</ul>

js 类似于：

.img-circle {
    border-radius: 150px;
}
.profile-image {
    height: 100%;
    display: block;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}

问题是：

虽然之前的代码在几乎所有场景/浏览器中都能正常运行，但是一些Android设备（他们的Chrome浏览器和甚至是webviews）以非常奇怪的方式重复图像，如下面的屏幕截图：

那么，为什么会发生这种情况？!! ..＆amp;怎么预防呢？

（我确定问题不在数据中，因为每张图片都有指向用户个人资料的链接，并且链接已经指向不同的个人资料）