Safari не работает background

CSS и iOS Safari

Доброго времени суток, дорогие хабрахабровцы!

Всегда хочется, что бы твой сайт выглядел одинаково хорошо на разных устройствах, включая и мобильные. Но, если поведение в браузерах Android во многом предсказуемо, то с iOS возникает ряд «сюрпризов». О них сегодня и поговорим!

Часть примеров уже публиковалась на Хабре, но я все-равно решил включить их в статью. Разделю статью на две части. В первой – приведу список полезных css-свойств для webkit, а во второй поговорим о фиксах проблем, возникающих при версте для iOS Safari.

Свойства

1. -webkit-overflow-scrolling: touch

Это css-свойство добавит плавный скролл в блоках с overflow: scroll. Рекомендую добавлять это свойство везде, где внутри блока может возникать прокрутка, к примеру, в мобильном меню.

2. -webkit-text-size-adjust: none

Отключает масштабирование текста в горизонтальной ориентации.

3. -webkit-tap-highlight-color: #ccc

Устанавливает цвет выделения активного элемента при тапе на нем (a, label). По умолчанию это серый цвет, и часто может быть ни к чему, или выбиваться из общего дизайна.

Пример такого выделения:

4. -webkit-appearance: none

Отключает наложение на элементы стилей системы: тени, border-radius и т.д. Применяется для input (но не всех), textarea, и т.д. Удобно, когда надо задать единый вид элементов на всех устройствах.

Применяется не только в верстке для Safari.

Данный медиа-запрос позволит отдельно прописывать стили только для устройств, с поддержкой тач. Таким образом, на тач-устройствах можно отключить лишние анимации, ненужные данным типам устройств.

Можно использовать не только в верстке для Safari.

Фиксы

1. background-attachment: fixed

Проблема: background-attachment: fixed не работает в iOS Safari.

Решение: Фиксировать не фон, а блок или псевдоэлемент.

2. Нежелательный скролл модального окна

Проблема: Это довольно редкий случай, но для общей информации, думаю, так же полезно будет знать о нем. Если модальное окно имеет собственную прокрутку и в закрытом состоянии просто установлен отрицательный z-index (и, к примеру, opacity: 0) — то при попытке скролла страницы, модальное окно может перехватить скролл. В результате чего не будет осуществляться прокрутка страницы.

Решение: Добавляем pointer-events: none к модальному окну в закрытом состоянии.

3. Пропадание меню при скролле
Для того, что бы меню «прилипало» к верхней границе экрана при скролле страницы, часто используют следующий прием. Изначально у меню установлено свойство position: absolute, и при достижении верхней границы окна, через js оно меняется на fixed. А при скролле страницы к началу, значение опять меняется на absolute.

Проблема: В Safari на iOS, при смене position с fixed на absolute, меню пропадает с экрана пока скролл не завершится.

Решение: Использовать для меню position: -webkit-sticky. Поведение меню будет сравнимо с вышеописанным, но пропадать ничего не будет! Плюс, не надо использовать js

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

4. Блок с position: fixed при скролле

Если реализации решений предыдущих проблем я видел на некоторых сайтах, то данная проблема на сайтах встречается постоянно.

Проблема: При скролле в браузере изменяется высота экрана. Отсюда, если при раскрытом меню или модальном окне не блокировать скролл, возникает подобный эффект:

Решение: Нужно сделать следующий «трюк», используя transform.

Величина в 70px покрывает разницу в изменении высоты окна. И только transform позволяет прорисовывать фон элемента за пределами экрана в данной ситуации.

Выводы

А выводов особо нет, просто пользуйтесь ) Если знаете еще полезные css-свойства или «фиксы», применимые на практике, пишите в комментариях!

Спасибо за внимание!

Update
В свойствах изменен пункт 5. Т.к. media (hover) имеет узкую поддержку. Спасибо dom1n1k за ценное замечание.

Источник

Фоновое изображение не отображается в Safari

Я работаю над адаптивным дизайном, и класс «bgMainpage» имеет фоновое изображение, но он не отображается на Safari на всех устройствах. Я применил обложку размера фона, поскольку это то, что хочет клиент. Я также добавил CSS для браузера, и я не уверен, что еще нужно сделать, чтобы он появился в Safari. Chrome, FF, IE показывают изображение просто отлично. Есть идеи ?

15 ответов

Safari имеет очевидную ошибку, когда он не будет показывать некоторые изображения jpg/JPEG определенного типа в фоновом режиме, если некоторые критерии выполнены. Для онлайн-использования существует тип jpg-изображения под названием Progressive JPEG. Обычные jpg-изображения кодируют данные изображения сверху вниз, и вы можете видеть, как они загружаются таким образом в интернете. Прогрессивный JPEG, с другой стороны, кодирует изображение все более подробно. Это означает, что сначала он загружает нечеткий, а затем становится более четким. Некоторые люди думают, что это выглядит лучше он-лайн, поэтому он и используется. Некоторые оптимизаторы изображений автоматически сделают jpgs прогрессивным для онлайн-использования.

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

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

Я не смог воссоздать это в любом браузере, кроме Safari.

чтобы исправить это, вы можете либо повторно Сохранить Изображение, убедившись, что оно не в прогрессивном формате (photoshop и т. д. имеют селектор для этого), либо использовать другой формат (gif, png и т. д.)

у меня такая же проблема и я решил эту проблему путем изменения:

и это хорошо работает в safari сейчас:)

Я попал сюда со страницы поиска google, поэтому, если эта проблема возникает для кого-то другого, просто убедитесь, что вы дважды проверяете свой код. Safari может быть очень придирчивым к правильному коду, поэтому, даже если он набран правильно здесь, в вопросе, просто сделайте двойную проверку этого. Если вы забудете конечную скобку, она не будет отображаться, где другие браузеры, такие как Chrome, предположат, что вы хотели поместить ее и правильно отобразить страницу. Убедитесь, что весь код выполнен правильно открыто / закрыто:

проблемы и нашел это, но ничего не получалось. В конце концов выяснилось, что URL () не хватает его заключительных скобок. Даже без него фоновые изображения работали на IE 9+, Edge, Chrome и Firefox. Только Safari из протестированных браузеров не показывал фоновые изображения.

добавил ) И все работало.

У меня была такая же проблема с Safari. Я пробовал другие решения, единственное, что сработало для меня, это удалить отрицательный z-индекс.

может быть, потому что изображение сохраняется неправильно. У меня была эта проблема один раз, и мне пришлось изменить следующее:

откройте свою фотографию в photoshop и сохраните ее «cmyk» эта опция должна быть изменяемой в представлении, configure-proof, cmyk-colors (извините, мой photoshop все на немецком языке)

надеюсь, что это помогает

У меня была та же проблема. мой образ был прогрессивным, и, как ответил JC Hulce, safari имеет ошибку с этим.
Чтобы проверить, если ваше изображение прогрессивная перейти к: techslides.com/demos/progressive-test.html .
Для исправления просто откройте в photoshop и перейдите в меню file — >save for web

попробуйте изменить или удалить .

его работает для меня в Safari.

я преобразовал формат изображения из jpeg в gif, и это сработало. Таким образом, окончательный CSS:

пожалуйста, попробуйте с помощью следующего кода, вам может потребоваться изменить ширину и высоту и url.

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

попробуйте этот код.

похоже, safari не нравится:

но я все равно хочу иметь параллакс, особенно на настольных компьютерах. Итак, моим решением было убрать все это с равнины .класс заголовка и поместите его под:

Это мое изображение отображается на большинстве iPhones через iPad. Он просто не охватывает iPhone 6 Plus. Разрешение этого телефона попадает на территорию рабочего стола.

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

Я просто столкнулся с этой проблемой, и ни одно из предложенных решений не исправило это. Я решил свой экземпляр этого, и это было связано со смешанными протоколами: сайт был https, а изображения bg были http. Это вызвало загрузку изображений беззвучно сбой и не отображается только на Safari, на MacOS и только для некоторых пользователей.

Источник

Background color CSS not working in safari but working fine in Chrome, Firefox

I have made a website in which i am applying white background color(#FFF ) to my panels(a div) to add some transparency effect. This works very fine in chrome & firefox . But doesn’t work in Safari. What should i do to create the same effect in safari.

I have tried all versions of background color(bgcolor, background-color etc) & also tried the hack

but none worked. please help. Also the Link tags not working in IE only but working perfectly in other browsers.

3 Answers 3

A white background does not add any transparency.

You can try the following, which should work in all browsers:

This blog post suggests this CSS hack:

Edited: this works for safari 7.1+ (in your case, 8.0)

Not the answer you’re looking for? Browse other questions tagged html css safari or ask your own question.

Linked

Related

Hot Network Questions

Subscribe to RSS

To subscribe to this RSS feed, copy and paste this URL into your RSS reader.

site design / logo © 2021 Stack Exchange Inc; user contributions licensed under cc by-sa. rev 2021.10.19.40495

By clicking “Accept all cookies”, you agree Stack Exchange can store cookies on your device and disclose information in accordance with our Cookie Policy.

Источник

Background image not showing in Safari

I am working on a responsive design and the class «bgMainpage» is having a background image but it is not showing on Safari on all the devices. I have applied background size cover as it is what the client wants. I have added browser specific CSS too and I am not sure what else to do so that it shows up in Safari too. Chrome, FF, IE show the image just fine. Any ideas ?

18 Answers 18

Safari has an apparent bug where it won’t show some jpg/JPEG images of a certain type in backgrounds if some criteria are met. For online use there is a type of jpg image called Progressive JPEG. Regular jpg images encode the image data from top to bottom, and you can see them load that way online. Progressive JPEG, on the other hand, encodes the image in progressively higher detail. This means that it loads fuzzy at first and then gets clearer. Some people think this looks better online, which is why it’s used. Some image optimizers will automatically make jpgs progressive for online use.

In my experience, Safari won’t display jpgs when some of the following criteria are met:

• progressive encoding is used
• the image is a background (for an element or the whole page)
• the image is large (I don’t know how big exactly, but I ran into problems with images that were in the thousands of pixels wide)
• possibly other things, I haven’t fully explored this bug

I have not been able to recreate this in any browser except Safari.

To fix this, you can either re-save the image, making sure that it isn’t in a progressive format (photoshop, etc have a selector for this), or use another format (gif, png, etc)

Источник

Фоновое изображение не отображается в Safari

Я работаю над адаптивным дизайном, и у класса «bgMainpage» есть фоновое изображение, но оно не отображается в Safari на всех устройствах. Я применил покрытие размера фона, так как это то, что хочет клиент. Я также добавил специфичный для браузера CSS, и я не уверен, что еще нужно сделать, чтобы он также отображался в Safari. Chrome, FF, IE показывают изображение просто отлично. Есть идеи?

15 ответов

Я преобразовал формат изображения из JPEG в GIF, и это сработало. Итак, окончательный CSS:

В Safari есть очевидная ошибка, из-за которой некоторые фоновые изображения jpg/JPEG определенного типа не отображаются в фоновом режиме, если выполнены некоторые критерии. Для использования в Интернете существует тип изображения JPG, который называется Progressive JPEG. Обычные изображения в формате jpg кодируют данные изображения сверху вниз, и вы можете видеть, что они загружаются таким образом онлайн. Прогрессивный JPEG, с другой стороны, кодирует изображение с более высокой детализацией. Это означает, что сначала он загружается нечетко, а затем становится понятнее. Некоторые люди думают, что в Интернете это выглядит лучше, поэтому его используют. Некоторые оптимизаторы изображения автоматически делают jpgs прогрессивным для онлайн-использования.

По моему опыту, Safari не будет отображать jpgs, если выполнены некоторые из следующих критериев:

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

Я не смог воссоздать это ни в одном браузере, кроме Safari.

Чтобы это исправить, вы можете либо повторно сохранить изображение, убедившись, что оно не в прогрессивном формате (для этого есть в Photoshop и т. Д. Есть селектор), либо использовать другой формат (gif, png и т. Д.)

Источник