Фонове зображення не відображається в Safari

Я працюю над адаптивним дизайном, і клас "bgMainpage" має фонове зображення, але він не відображається в Safari на всіх пристроях. Я застосував кришку розміру фону, оскільки це те, що хоче клієнт. Я також додавав специфічний для браузера CSS теж, і я не впевнений, що ще зробити, щоб він також відображався в Safari. Chrome, FF, IE показують зображення просто добре. Будь-які ідеї?

Посилання на проект

CSS:

.bgMainpage{
    background:url("../images/bg.jpg") no-repeat scroll right top #000000;
    -o-background-size: cover;
    -moz-background-size: cover;
    -webkit-background-size:cover;
    background-size: cover;
}
19

15 Відповіді

Safari має очевидна помилка, коли він не покаже деяких зображень jpg/JPEG певного типу у фонах, якщо деякі критерії будуть виконані. Для використання в Інтернеті є тип JPG-зображення під назвою Progressive JPEG. Звичайні зображення jpg кодують дані зображення зверху вниз, і ви можете бачити їх завантаження таким чином в Інтернеті. Прогресивний JPEG, з іншого боку, кодує зображення у поступово більш високій деталізації. Це означає, що спочатку завантажується нечіткий, а потім стає зрозумілішим. Деякі люди думають, що це виглядає краще в Інтернеті, тому його використовують. Деякі оптимізатори зображень автоматично зробить jpgs прогресивним для використання в Інтернеті.

З мого досвіду, Safari не відображатиме jpgs, якщо будуть виконані деякі з наступних критеріїв:

  • прогресивне кодування використовується
  • зображення є фоном (для елемента або всієї сторінки)
  • зображення велике (я не знаю, наскільки це велика, але я зіткнувся з проблемами з зображеннями, які були у тисячах пікселів)
  • можливо, інші речі, я не повністю вивчив цю помилку

Я не зміг відтворити це в будь-якому браузері крім Safari.

Щоб це виправити, ви можете або зберегти зображення, переконавшись, що його немає у прогресивному форматі (для цього використовується селектор для Photoshop, тощо) або використовувати інший формат (gif, png та ін).

29
додано
+1 Вау, це здається досить непомітною помилкою. Було б непогано, якби з'явився якийсь спосіб побачити, чи визнає це Apple (можливо, WebKit?).
додано Автор Whymarrh, джерело
щоб перевірити, чи ваше зображення прогресивне: techslides.com/demos/progressive-test.html . Щоб виправити, просто відкрийте у Photoshop і перейдіть до меню файлу-> збережіть для Інтернету
додано Автор Zeev G, джерело

У мене така ж проблема, і я вирішив цю проблему, змінивши:

background: url("images/backgroundimage.jpg") no-repeat fixed 0 0/cover rgba(0, 0, 0, 0);

на:

    background: url("images/backgroundimage.jpg");
    background-repeat: no-repeat;
    background-attachment: fixed;
    -o-background-size: cover;
    -moz-background-size: cover;
    -webkit-background-size: cover;

і це добре працює в сафарі зараз :)

13
додано
Проблема з цим CSS - це порядок атрибутів, наданих background . no-repeat має йти останній. Див. MDN
додано Автор Mika, джерело
не працюй для мене ....
додано Автор Balvant Ahir, джерело

Я приїхав сюди з пошукової сторінки Google, тому, якщо ця проблема виникає для когось іншого, просто переконайтеся, що ви двічі перевіряєте свій код. Сафарі може бути дуже розбірливим щодо коректного коду, тому, навіть якщо це правильно введено в запитанні, просто перевірте це. Якщо ви забудете кінцеву дужку, вона не відображатиметься, де інші веб-переглядачі, як Chrome, вважатимуть, що ви мали намір поставити його і правильно відобразити сторінку. Переконайтеся, що весь ваш код правильно відкритий/закритий:

<div style = "background-image: url ('../ images/bg.jpg');"> HEY </div>

10
додано

Була б проблема і знайшла це, але нічого не спрацювала. Врешті-решт з'ясувалося, що у URL() не вистачало кінцевих дужок. Навіть без цього фонові зображення працювали в IE 9+, Edge, Chrome і Firefox. Тільки Safari із перевірених веб-переглядачів не відображає фонові зображення.

Додано), і все працювало.

6
додано

У мене була та сама проблема з Safari. Я спробував інші рішення, єдине, що працювало для мене, було видалити негативний z-індекс .

5
додано
Так, розв'язав мене теж!
додано Автор Jared Bledsoe, джерело
Спасибі, це вирішило мою проблему!
додано Автор Jerome Dahdah, джерело

може бути, тому що картинка зберігається неправильно. Я мав цю проблему один раз і повинен був змінити наступне:

відкрийте свою фотографію в Photoshop і збережіть її "cmyk", ця опція повинна бути змінною у перегляді, конфігурація-proof, cmyk-colors (вибачте, мій Photoshop - все на німецькій мові)

сподіваюся, це допоможе

1
додано
Ви можете дати мені пряме посилання на картинку? ../ images/bg.jpg
додано Автор caramba, джерело
Не працював : /
додано Автор AnAspiringCanadian, джерело
Знайшли рішення. Я розміщу розчин окремо, дякую, що зазирнули в це, хоча це цінує.
додано Автор AnAspiringCanadian, джерело

Я перетворив формат зображення з JPEG в GIF, і він працював. Отже, остаточний код CSS:

.bgMainpage{
    background:url("../images/bg.gif") no-repeat scroll right top #000000;
    -o-background-size: cover;
    -moz-background-size: cover;
    -webkit-background-size:cover;
    background-size: cover;
}
1
додано
приємно, хантер, може, ви поглянете на це і зміните його на .png w3.org/QA/Tips/png-gif - счастливе кодування
додано Автор caramba, джерело
Це вже було png! Я тоді перетворив його в JPG, але він все одно не працював, тому я перетворився на старий старий GIF, і це зробило. Спасибі, хоча. ;)
додано Автор AnAspiringCanadian, джерело

I had the same problem. my image was progressive and like JC Hulce answered, safari has a bug with that.
To check if your image is progressive go to: techslides.com/demos/progressive-test.html .
To fix just open in photoshop and go to the menu file->save for web

1
додано

Спробуйте змінити або видалити :::

background-attachment:fixed;

його роботи для мене в сафарі .....

1
додано

Будь ласка, спробуйте з наступним кодом, можливо, доведеться змінити ширину, висоту та URL-адресу.

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

.gallery {
   height: 190px;
   width: 940px;
   margin-bottom: 13px;
   background-color: transparent;
   background-image: url("/img/user/admin/photo.jpg");
   background-repeat:no-repeat;
   background-position: center bottom;
   background-attachment: scroll;
   background-size: cover;
  -ms-background-size: cover;
  -o-background-size: cover;
  -moz-background-size: cover;
  -webkit-background-size: cover;
}
</div> </div>
1
додано

Я просто побіг у цьому питанні, і жоден із запропонованих рішень не виправдав це. Я вирішив мою екземпляр цього, і це було пов'язано з змішаними протоколами: на сайті був https, а зображення bg - http. Це призвело до того, що завантаження зображень могло невдало і не відображатись лише в Safari, на MacOS і лише для деяких користувачів.

0
додано

Спробуйте цей код.

.bgMainpage{
    background:url(../images/bg.jpg) no-repeat scroll right top #000000;
    -o-background-size: cover;
    -moz-background-size: cover;
    -webkit-background-size:cover;
    background-size: cover;
0
додано

У мене була така ж проблема, і жоден з інших рішень не вирішив цю проблему. Для мене у мене було фонове зображення на якорі, загорнутий у розділ. Всі веб-переглядачі обробляли фонове зображення чудово, крім Safari 6. Виправлення для мене полягало в тому, щоб встановити позицію: relative на div і position: absolute на якоря.

0
додано

Здається, сафарі не подобається:

background-attachment: fixed;

Але я все ще хочу мати якийсь паралакс, особливо на настільних комп'ютерах. Отже, моє рішення полягало в тому, щоб вилучити вищесказане з простого класу .header і помістити його нижче:

@media(min-width: 1334px)

Це моє зображення відображається на більшості iPhones через iPad. Це просто не покриває iPhone 6 Plus. Ця роздільна здатність телефону потрапляє на територію настільного ПК.

0
додано

У мене була однакова проблема, але я не мав жодного контролю над зображенням, тому що його створювали tumblr, тому прогресивні пропозиції не працювали. Я двічі перевірив мій код та все, що було також запропоновано, нарешті, я спробував встановити міні-висоту до div з фоновим зображенням, і Safari нарешті відобразив його так, як це робив кожен інший браузер. Надія, що допомагає позбутися від декількох головних болів.

0
додано