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

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

Как писать стили под сафари? Все что я нахожу в интернете работает на сафари и на хроме, или вообще не работает.

Но ничего не помогает.

Сам главный стиль загружается так

Стоит заметить что тест провожу на Safari под Windows. Возможности использовать Mac нету)

1 ответ 1

1. Забудьте про Safari под винду. Современный крутой сафари на маке пашет не хуже хрома. Так что в 99,9% тестировать в нем нужно только из-за того, что под маком шрифты рендерятся по другому, и тексты получаются пошире. В остальном, если в Хроме все хорошо, то будет хорошо и в Сафари.
2. [if lt Safari] — так не бывает. Conditional Comments — это фишечка только у IE до 10 версии. Другие браузеры вообще кладут болт на это.
3. В целом, чтобы потестить Сафари, не обязателен Мак. Можно просто взять iPad/iPhone.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками html css или задайте свой вопрос.

Похожие

Подписаться на ленту

Для подписки на ленту скопируйте и вставьте эту ссылку в вашу программу для чтения RSS.

дизайн сайта / логотип © 2021 Stack Exchange Inc; материалы пользователей предоставляются на условиях лицензии cc by-sa. rev 2021.10.18.40487

Нажимая «Принять все файлы cookie» вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.

Источник

Не работает overflow в Safari

Вот эта часть (раздел цены и условия занятий): https://fotki.yandex.ru/next/u. iew/998283 в браузере Safari выглядит очень ужасно.

CSS-свойство overflow:hidden тут как то по-другому работает. Народ, подскажите, как это исправить? А то я уже голову сломал.

Помощь в написании контрольных, курсовых и дипломных работ здесь.

Скругление у списков, не работает как надо overflow:hidden в safari
Доброго времени суток и снова о нелегком. Сверстал круглое меню на основе списка ul. В хроме, лисе.

overflow: hidden in Chrome, Safari, Opera
Всем привет! Необходимо сверстать PSD для Joomla, все сделал, но вот в одном месте наткнулся на.

Не работает :focus в Safari
Столкнулся с такой проблемой: имеется кнопка, на ней стоит autofocus, то есть при загрузке страницы.

В Safari не работает input
не отображаются картинки в SAFARI, то есть пользовательские картинки для «input» типа type=»radio».

Не работает скроллинг в Safari
На сайте есть всплывающее меню с длинным списком(модальное окно), при вызова которого блокируется.

Iframe не работает на ios(safari)
Вставил в сайт iframe, во всех браузерах работает, а в safari пусто, как лечить?

Не работает flex-wrap в Safari
Подниму вопрос, или на него ответа нет? Меня конкретно flex-wrap: wrap интересует, как его в сафари.

Некорректно работает :hover в safari
Добрый день, уважаемые форумчане! Слезно прошу у вас помощи, или хотя бы пинка в направлении, в.

Источник

Форсирование соотношения сторон с помощью CSS не работает в Safari

Следующий код хорошо работает в Firefox и Chrome, но не работает в Safari (протестирован на Mac и iPad): http://jsfiddle.net/eFd87/.

Цель состоит в том, чтобы div-оболочка сохраняла фиксированное соотношение сторон ( в моем веб-приложении это карусель ), а изображение внутри него изменяло размер, чтобы поместиться в div (и по центру).

В Safari изображение не отображается из-за символа height: 0 (который дает высоту 0 для img). С height: 100% изображение отображается, но не помещается в div (переполняется).

Видите ли вы какое-нибудь решение этой проблемы? Я занимаюсь этим несколько часов .

4 ответа

Как было объявлено на WWDC20 на странице Что нового для веб-разработчиков, начиная с Safari 13.1, WebKit теперь вычисляет соотношение сторон изображения на основе значений ширины и высоты элемента изображения. Это означает, что проблема, с которой вы столкнулись, исправлена ​​в последней версии браузера.

В следующем видео вы можете увидеть тест, запущенный на моем компьютере, в котором Chrome и Safari ведут себя одинаково: https://recordit.co / GULXcMpfPW

Ширина 100% и автоматическая высота работали у меня в Safari. Первоначально я использовал 100% как для w, так и для h, что отлично работает в FF, но не работает в Safari.

И о, я использовал Bootstrap, который добавляет это ко всем элементам.

Это не совсем лучший ответ на ваш вопрос, но, тем не менее, это ответ.

Я очень сомневаюсь, что это возможно сделать, используя только подход CSS, потому что, насколько мне известно (я рад, что меня поправили), нет возможности выполнять вычисления на основе другого свойства css. Так, например, width: height * 1.3; невозможно. Вы также не можете использовать%, потому что это процент от родителя, а не от самого себя.

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

Насколько я могу судить, ваш единственный вариант — это javascript. наиболее очевидным и моей рекомендацией будет jQuery или какой-либо другой фреймворк для вычисления и явной установки высоты в зависимости от ширины. Однако не забывайте следить за изменением размера окна браузера.

Если вас не беспокоят старые браузеры, вы можете использовать свойство object-fit

Свойство CSS object-fit используется для указания того, как следует изменить размер или , чтобы он соответствовал его контейнеру.

Или, если вам нужно поддерживать старые браузеры, здесь обсуждается изящный трюк с Netflix:

Источник

Укрощая Safari

Автор: Hiway
Дата записи

Обычно, работая над каким-либо проектом по верстке, я сто процентов проверяю правильность разметки в трех наиболее популярных на сегодняшний день браузерах: Firefox, Internet Explorer6 и Internet Explorer7. А после того, как проверена верстка на Firefox и исправлены все багги «горячо любимого» мною IE, для полного морального удовлетворения я проверяю верстку в Opera и Safari.

Сразу хочу отметить, что последние версии Safari (3.1 для Windows), Firefox (3.0.x) и Opera (9.5x), при условиях грамотной валидной верстки фактически идентично отображают разметку. По крайней мере, в 90% случаев. Конечно, остаются 10%, о которых мне и хотелось бы написать в этом посте. Вернее даже не 10%, а 5%, поскольку в этом материале я не буду говорить про Opera, а исключительно о Safari.

Итак, поговорим о верстке для Safari

Для начала мне хотелось бы сказать пару слов о замечательном инструменте «Веб-инспектор», который по умолчанию входит в Safari 3. Этот инструмент, конечно, не дотягивает по своим возможностям к известному плагину для Firebug (для Firefox), по позволяет успешно тестировать и отлаживать верстку в Safari.

Кстати, инструмент очень погож, на внедренный в Opera 9.5 помощник разработчика «Opera Dragonfly«. Но о нем позже.

А пока что вкратце скажу, что «Веб-инспектор» позволяет вам проверить код страницы, умеет строит древо элемента, поновляет редактировать css «на лету». Кроме этого, он отображает полную информацию о загрузке страницы. В общем, есть самые необходимые функции.

А сам факт того, что такой инструмент включен в сборку по умолчанию, говорит о том, что создатели Safari думали о разработчиках веб-приложений, чего не скажешь о создателях Internet Explorer.

Ну а теперь собственно о верстке

В принципе начиная верстку для сафари было бы полезно сначала посмотреть на то, какую таблицу стилей использует браузер по умолчанию. Это можно узнать из моей статьи «Правильная очистка свойств и CSS с оглядкой на дефолтные стили браузеров». Или вот по этой ссылкам

Ну, естественно, что знакомство со спецификациями CSS, HTML, XHTML подразумевается по умолчанию.

Когда вы вооружитесь необходимыми знаниями, то можно спокойно верстать. Но при этом конечно не стоит забывать о том, что если вы используете reset.css для обнуления дефолтных стилей, то это вовсе не означает, что вы получите ожидаемый результат на сто процентов. В общем, есть свои нюансы для каждого браузера, и вписать их все в reset.css зачастую нельзя в силу различных причин. И тогда на помощь приходят «хакаи-, трюки- и уловки-css.

CSS-Хаки для Safari

Несмотря на все свои достоинства, Safari 3 для Windows не попадет в число браузеров «grade-A browser«по поддержке CSS. Поэтому, пока и приходится использовать хаки.

Итак, начнем с самых простых хаков, которые делают код доступным только для Safari 3

• :first-of-type это селектор CSS3. И когда другие браузеры начнут польность поддерживать CSS3 этот хак будет не актуален. А пока самый простой способ сделать правило исключительно для Safari 3.0

Следующие хаки стоит использовать с оглядкой на определенные задачи и условия верстки. В частности на движки браузеров.

Данные хаки подходят не только для используемого сегодняSafari3

/* Код для Safari/KHTML но не WebKit */
html[xmlns*=»»] body:last-child . < . >

/* Код для Safari/Webkit/KHTML */
body:last-child:not(:root:root) . < . >

* Соответственно «…» после хака — это место для классов и Id

-webkit-min-device-pixel-ratio

Очень хорошим методом для Safari 3 является использование следующего объявления вот в такой конструкции:

@media screen and (-webkit-min-device-pixel-ratio:0) <
p >

Это работает только для Safari 3. Причем, не смотря на то, что min-device-pixel-ratio — объявление из CSS3 префикс «-webkit» позволит использовать этот хак даже тогда, когда другие браузеры начнут полностью поддерживать CSS3.

И в заключение, хотелось бы еще привести пример использования js для определения Safari3

Как я уже говорил, сегодня только сафари поддерживает devicePixelRatio . Поэтому чтобы не использовать устаревший метод «document.all», вы можете проверить браузер с помощью такого скрипта:

Ну, в принципе, пока это все. Удачной верстки!

При написании стать использовались материалы:

Источник