Html CSS背景图像有时显示？断断续续

我有一个口袋妖怪演示，我已经完成了。然后一个朋友告诉我他看不到这个角色，另一个朋友也告诉我

现在我已经在多个浏览器和不同的操作系统上进行了测试，可以确认它有时会出现，而不是其他。即使重新加载页面并删除/添加css属性（只需在开发工具中勾选它们的开/关）也会导致它出现

---

这里没有标记来重现问题，链接到代码笔不够好。我在Chrome48 Windows Vista上，看不到任何字符。我很高兴有一个停止音乐的按钮。

.player {
  position: absolute;
  width: 16px;
  height: 16px;
  margin: 32px 32px;
  transition: margin 0.35s linear;
  background-image: url("http://i.imgur.com/NstnP8t.png");
  background-repeat: repeat;
}
.player.down {
  background-position: -324px -36px;
}
.player.up {
  background-position: -324px -54px;
}
.player.left {
  background-position: -306px -144px;
}
.player.right {
  background-position: -306px -144px;
  transform: scaleX(-1);
}
.player.upAnim {
  animation: upAnim 0.35s steps(1) forwards;
}
.player.downAnim {
  animation: downAnim 0.35s steps(1) forwards;
}
.player.leftAnim {
  animation: leftAnim 0.35s steps(1) forwards;
}
.player.rightAnim {
  animation: rightAnim 0.35s steps(1) forwards;
}