фоновое изображение не отображается в iphone

Question

Я не знаю, почему «фоновое изображение», которое я установил, работает нормально во всех браузерах, но не в браузере Iphone (который мне нужен),

Это актуальностиль для вопроса

    /**************************************************
        ESTILOS PARA SINGLE JOB
    **************************************************/


   /*Deleting all styles that dont take any effect with the question*/

    #panel.right ul.visible li a span.liLeft{
             width:95px;
             float:left;height:100%;display:block;
             position:relative;
             right:40px;
             /*HERE I INIT THE STYLE OF THE BACKGROUND IMAGE BUT I DONT SET THE URL*/
             -webkit-background-size: cover;
             -moz-background-size: cover;
             -o-background-size: cover;
             background-size: cover;
             z-index:10;
    }



    #panel.right ul.visible li a span.liRight{
             background:black !important;
             color:#fff;

    }

    #panel.right ul.visible li a span.liRight{
            z-index:9;
    }

    #panel.right ul.visible li#blue a{
            border-color:#0C7CC3;
    }
    #panel.right ul.visible li#pink a{
            border-color:#C21B7B;
    }
    #panel.right ul.visible li#orange a{
            border-color:#E83B35;
    }

    /*  HERE i set the urls for the different Id's and i can't see them in the iphone  */
    #panel.right ul.visible li#blue a span.liLeft{

            background-image:url('http://piscolabis.info/licht/img/azul.png');
    }
    #panel.right ul.visible li#pink  a span.liLeft{
            background-image:url(../img/rosa.png);
    }
    #panel.right ul.visible li#orange  a span.liLeft{
            background-image:url(../img/naranja.png);
    }


    /* deleting more styles*/

Вы можете проверить онлайн-код на http://jsfiddle.net/6dK3T/2/ или на http://piscolabis.info/job_single.html

Как видите, я установил полный URL-адрес только для того, чтобы вы моглиЯ вижу, что изображение находится на сервере (и в любом браузере на рабочем столе), но я не знаю, почему изображение все еще не отображается в iphone

(оно отображается точно так же, как два других, которые я не делал)t установить абсолютный путь (и поскольку они не находятся в jsdfiddle, они не работают))

Это из-за фонового изображения?это потому что позиция: относительная?

есть идеи, почему это происходит?

-EDIT-

должно выглядеть так

Разве это не похоже на тайну?

Answer 1

Мне удалось показать его на моем iPhone, немного подправив стили:

#panel.right ul.visible li a span.liLeft{
     width:95px;
     float:left;
     height:100%;
     display:block;
     position:relative;
     margin-left: -40px;
     margin-right: 40px;
     -webkit-background-size: cover;
     -moz-background-size: cover;
     -o-background-size: cover;
     background-size: cover;
     z-index:10;
}



#panel.right ul.visible li a span.liRight {
     background:black !important;
     float: left;
     color:#fff;
}

Проблема была та же с Safari на OSX.При удалении

 right: 40px;

в CSS изображения начали показываться.

http://jsfiddle.net/5sX54/9/

Answer 2

У меня была похожая проблема с изображением, которое было 2200x2500px, но только 130kb и не загружалось.Похоже, что смартфоны и планшеты не загружают изображения шире, чем 1024 пикселей.

Поэтому попробуйте загрузить изображение меньшего размера для определенных устройств, и оно должно работать. ОК.

Редактировать: я также удалил размерына изображении и появилось большое изображение.В моем случае я удалил background-size (или поставил auto).

Answer 3

попробуйте указать точную высоту элемента #panel.right ul.visible li a span.liLeft. Я изменил вашу скрипку, добавил 90px вместо 100% и, похоже, работает на моем iphone: http://jsfiddle.net/UGEyS/

Answer 4

Вы загружаете одно и то же фоновое изображение на iphone?Это выглядит как довольно большое изображение, так что оно может как-то ускользать от окна просмотра?У меня нет iphone для тестирования, и это выстрел в темноте, но вы можете попытаться настроить html, чтобы он соответствовал размеру области просмотра браузера с метатегом, как этот:

<meta name="viewport" content="width=device-width, initial-scale=1"/>

Или вы можете просто использовать медиа-запрос для нацеливания на область просмотра размером меньше чем 480px, чтобы использовать другое, меньшее фоновое изображение.