Почему может пропадать изображение при клике по ссылке?

Question

[ravlex]

Есть слайдер со стрелками, стрелки это тег с фоном, при наведении на которую фон меняется замещением другой картинки. Проблема в том, что на моб. устройствах, при клике на стрелку, она пропадает (куда-то уезжает), но когда кликаешь другую стрелку, предудыщая появляется (и наоборот).

Вот пример реализации одной из стрелок:

#right{
    transform: scale(-1, 1);
    background: url('images/r3.png') no-repeat;
    height: 30%;
    right: 1.7%;
    display: block;
    width: 7%;
    z-index: 2;
    top: 27%;
    bottom: 0;
    position: absolute;
    -webkit-background-size: contain;
    background-size: contain;
}

#right:hover {
    background: url('images/r4.png') no-repeat;
    transform: scale(-1, 1);
}

Кто знает, в чем проблема? Подскажите, пожалуйста. Если нужен сайт на котором я делаю - prokitay-mebel.ru , секция "ЭКОНОМИЯ В ЦИФРАХ".

Answer 1

[taki154]

на вскидку:
- используйте спрайты для иконок. вполне может быть, что она не успевает загружаться. 9 из 10.
- если не можете использовать спрайты - сливайте иконки в css, в base64. это гарантирует быструю загрузку иконок.
- :hover на мобильнике - это нечто другое, чем на дэкстопе, именно поэтому по клику на иконку вы, скорее всего, видете ее :hover-эффект с иконкой, которая не успеваеит грузиться.