Safari не работает box shadow

Поисковые системы
- Google
- Яндекс
- Каталоги сайтов
- Прочие поисковики
- Агрегаторы и доски объявлений
Практика оптимизации
- Общие вопросы оптимизации
- Частные вопросы — ранжирование, индексация, бан
- Сервисы и программы для работы с SE
- Любые вопросы от новичков по оптимизации
- Ссылочные и пользовательские факторы
- Поисковые технологии
- Doorways & Cloaking
Трафик для сайтов
- Поисковая и контекстная реклама
- Google Adwords
- Яндекс.Директ
- Тизерная и баннерная реклама
- Общие вопросы рекламы
Монетизация сайтов
- Партнерские программы в Интернете
- Контекстная реклама
- Google AdSense
- Рекламная Сеть Яндекса
- Размещение тизерной и баннерной рекламы
- Общие вопросы
Сайтостроение
- Веб-строительство
- Статистика и аналитика
- Доменные имена
- Администрирование серверов
- Хостинг
- Безопасность
- Usability и удержание посетителей
- Копирайтинг
Социальный Маркетинг
- Вконтакте
- YouTube
- Facebook & Instagram
- TikTok
- Telegram
- Общие вопросы
Общение профессионалов
- Семинары и конференции
- eCommerce, интернет-магазины и электронная коммерция
- Телефония и коммуникации для бизнеса
- Деловые вопросы
- Финансы
- Cчет в Яндекс.Деньгах
- Криптовалюты
- Инвестиции
- Экономика
- Правовые вопросы
Биржа и продажа
- Финансовые объявления
- Работа на постоянной основе
- Сайты — покупка, продажа
- Соцсети: страницы, группы, приложения
- Сайты без доменов
- Трафик, тизерная и баннерная реклама
- Продажа, оценка, регистрация доменов
- Ссылки — обмен, покупка, продажа
- Программы и скрипты
- Размещение статей
- Инфопродукты
- Прочие цифровые товары
Работа и услуги для вебмастера
- Оптимизация, продвижение и аудит
- Ведение рекламных кампаний
- Услуги в области SMM
- Программирование
- Администрирование серверов и сайтов
- Прокси, ВПН, анонимайзеры, IP
- Платное обучение, вебинары
- Регистрация в каталогах
- Копирайтинг, переводы
- Дизайн
- Usability: консультации и аудит
- Изготовление сайтов
- Наполнение сайтов
- Прочие услуги
Не про работу
- О сайте и форуме
- Самое разное
- Курилка
- Встречи и сходки
- Железо и софт

Российское приложение AliExpress вышло на первое место по количеству скачиваний на Android

Как правильно удалить страницы с сайта и избежать проблем

Есть две проблемы с ipad (chrome, safari)

1. Не отображается тень блоков.

2. Не отображаются ссылки верхнего и нижнего меню.

По первому вопросу куски кодов:

По второму вопросу куски кода:

В ситуации со ссылками не помогает даже то, что я убрал все тени и шрифты.

На iPhone все видно. В сафари и хроме на ПК тоже все нормально Может у меня планшет такой?

Айпад первый 64 гига, ios 5.1

Посмотрите плиз, если у кого тоже есть такой планшет работает ли у вас? Или у меня руки совсем кривые?! :crazy:

Safari -webkit-box-shadow не знает, а box-shadow задан криво, вот и не работает тень. кстати -moz-box-shadow то же бредовый.

Есть в коде box-shadow

Ну и вот, кстати на htmlБУК:

Safari до версии 5.1, Chrome до версии 10.0 и iOS поддерживают свойство -webkit-box-shadow.

Firefox до версии 4.0 поддерживает свойство -moz-box-shadow.

на iPad стоит Safari :bl который берёт последнюю по списку из известных ему директив, в вашем случае возмёт кривой box-shadow. Chrome берёт прежде всего «родные» директивы -webkit-*.

но даже для FF любой версии надо корректно задавать директивы, что бы свойство работало.

сами осилите посмотреть на кошерный box-shadow или надо сюда перепостить?

DiAksID:
на iPad стоит Safari 😂

но даже для FF любой версии надо корректно задавать стили, что бы свойство работало.

и вам ссылку скинули, сами осилите посмотреть на кошерный box-shadow или надо сюда перепостить?

спасибо, осилю конечно )) С блоками разобрался. невнимателен был. пойду со ссылками разбираться.

По второму решения так и не нашел.

Самое интересное, что ссылки там как бы есть, но их не видно. т.е. переход по ссылкам работает.

Источник

Баг safari при использовании drop-shadow и transform

Здесь и на фидле (https://jsfiddle.net/a2x4ps5c/) кажется не работает, но чистый html документ в сафари дает примерно такой результат при hover с трансформацией (тень обрезается). Как это пофиксить? Как это пофиксили фидл?

1 ответ 1

Сделать размер блока больше и размещение фонового изображения в центр чтобы другие блоки или край документа не мешали рисовать тень. Для наглядности разницы добавил второй блок и границу

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

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

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

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

Источник

Safari box shadow inset support

I have a box in one of my websites that has a these property:

This gives the box a nice gradient towards the center. However, Safari does not support the «inset» property and IE doesn’t support box-shadow at all. I can’t use an image for this because the height of this box changes for each situation.

I don’t want to use 3 images, (one for the top, a repeating one for the middle and one for the bottom), as this can get very messy code.

So what I’m asking is if there is any way to produce the box shadow in all browsers.

EDIT: Anybody know of some javascript snippet that could possibly do this? Just wondering.

4 Answers 4

The latest Webkit build (and probably many before) has support for inset . It will probably get to Safari for the next release.

However, you won’t be able to do it on all browsers without the three images trick. Internet Explorer’s not going to collaborate with you otherwise.

That being said, I don’t think your goal should be to get identical results in all browsers. I think you should get decent results in all browsers, but it’s normal that web pages in Safari or Firefox look better than in Internet Explorer 7. Besides, only web geeks compare web page rendering across different browsers.

Agreed; to be honest, I’ve no qualms about leaving my pages looking blander and blockier on Internet Explorer than superior browsers. The content is still readable, accessible, and navigable: but screw getting it pixel perfect between browsers. If anything, it’ll just give Microsoft all the more incentive to improve their browser’s support for CSS3.

Personally, I think the inset flag is one of the most awesome features being promised by box-shadows. aside from giving elements a depressed, «cut-out» effect, inset shadows can also be used to create glowing edges and angled shading, an effect that can’t be easily achieved using straight background gradients (especially with rounded edges). Being able to inset shadows opens up a whole wealth of opportunities for web design.

Knowing that Safari didn’t support it had me worrying it might be dropped from the spec at some point: God knows there’s no reason to drop something so useful. >_>

Источник

Кроссбраузерные box-shadow в CSS

Введение

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

CSS3 теперь позволяет нам создавать несколько теней на любой элемент блочного типа при помощи CSS-свойства box-shadow . Это экономит много времени в графических редакторах и позволяет избавиться от кучи лишних div -ов, но к сожалению box-shadow не поддерживается браузером Internet Explorer. Что же нам теперь лучше сделать?

В этой статье я покажу вам возможное кроссбраузерное решение — технику с использованием box-shadow , которая также добавляет поддержку IE для этого свойства. Я не буду описывать использование базового синтаксиса этого свойства, т.к. это итак хорошо описано в англоязычной статье CSS3 borders, backgrounds and box-shadows.

Нативная поддержка браузерами

CSS3-свойство box-shadow хорошо поддержкивается большинством современных браузеров, однако для кросс-браузерной поддержки, вам необходимо использовать все перечисленные варианты свойства:

Для поддержки в Opera, IE9 и выше используется официальный вариант свойства от консорциума W3C, без префиксов: box-shadow
Для поддержки в Firefox, используется вариант с префиксом -moz- : -moz-box-shadow
Для поддержки браузеров на движке WebKit (таких как Google Chrome и Apple Safari), используется вариант с префиксом -webkit- : -webkit-box-shadow
IE до версии 8 включительно не поддерживает это свойство вовсе, так что вам придётся либо отказаться от тени, либо создать обходной путь — мое решение описано ниже.

Поддержка браузерами box-shadow :

Internet Explorer	Firefox	Safari	Chrome	Opera
Давнее прошлое	6.0	3.0	3.2	3.0	9.6
Прошлое	7.0	3.5	4.0	4.0	10.10
Настоящее	8.0	3.6	5.0	5.0	10.60
Ближайшее будущее (первая половина 2010)	8.0	3.6	5.0	5.0	10.60
Будущее (вторая половина 2010 или позже)	9.0	4.0	5.*	6.0	11.0

Данные об IE9 взяты из IE9 Platform Preview 3.

Фильтры в IE

Изучая css-фильтры в IE, я наткнулся на интересный факт: фильтр blur позволяет размывать блоки почти идентично тому, как размывается тень в альтернативных браузерах. Например, есть блок со следующими параметрами:

Визуальное отображаение показано на рисунке 1.

Рисунок 1: Простой

Добавим к нему фильтр blur с силой размытия 5, используя следующий фильтр:

Теперь блок отображается с размытием, что идентично тени, используемой в CSS box-shadow . Результат показан на рисунке 2.

Рисунок 2: Наш простой

Создание выпадающей тени в IE и в других браузерах

Мы может использовать эту особенность для создания тени в IE. Я добавлю невидимый блок того же размера, что и контентовый блок, куда мы хотим добавить тень. В браузерах, поддерживающих box-shadow , он будет скрыт. Для IE использовался выносной блок с абсолютным позиционированием. Слой с контентом накладывается выше по z-index, чем тень.

В современных браузерах, выпадающая тень создается с помощью следующего HTML и CSS:

Для повторения этого эффекта в IE, мы добавим специальный невидимый

Результат показан на рисунке 3:

Рисунок 3: Выпадающая тень для IE, показанная без родительского блока, по отношению к которому она применяется

Соединяя примеры вместе

Вы можете скачать пример для выпадающей тени и пример для внутренней тени, чтобы иметь больше представления, как эта техника работает. Ниже я привёл полный код для базового метода. Первый листинг кода содержит HTML-код для примера, с базовым блоком и блоком для IE, соединенные вместе:

Следующий листинг показывает первый блок CSS-кода, который применяется для каждого браузера:

Здесь мы ставим box-shadow для браузеров, которые его поддерживают, и затес скрываем тень для IE от альтернативных браузеров. Следующий CSS-код используется только для IE — мы применяем его через conditional comments:

Здесь baseBlock используется для позиционирования контента и его выпадающей тени. Контентом является

Особенности расчёта значений параметров left , top , right and bottom для блока тени в IE:

значение left расчитывается как смещение по оси Х минус степень размытия;
значение top расчитывается как смещение по оси Y минус степень размытия;
значение right расчитывается как степень размытия минус смещение по оси Х;
значение bottom расчитывается как степень размытия минус смещение по оси Y.

Таком образом в коде, мы используем следующие расчёты, чтобы эмулировать смещение тени в box-shadow:10px 10px 5px #444 :

Значение left расчитывается как смещение по оси Х минус степень размытия; 10 – 5 = 5
Значение top расчитывается как смещение по оси Y минус степень размытия; 10 – 5 = 5
Значение right расчитывается как степень размытия минус смещение по оси Х; 5 – 10 = –5
Значение bottom расчитывается как степень размытия минус смещение по оси Y. 5 – 10 = –5

После того, как всё сказано и сделано, конечный результат представлен на рисунке 4:

Рисунок 4: Финальный пример, показывающий выпадающую тень в современных браузерах и в текущих версиях IE

Внутренняя тень

Мы можем использовать аналогичный метод для создания внутренней тени, которая будет работать во всех браузерах, включая IE. Отличия в том, что overflow: hidden; используется для обрезки тени так, что она не выходит за пределы базового блока. Также мы меняем background-color в CSS для IE на цвет box-shadow в главном CSS-коде. И снова, сперва начнём с листинга HTML:

Далее, CSS, который используется для всех браузеров:

И в заключении, CSS, который используется только в IE через conditional comments:

Особенности расчёта значений CSS-свойств left , top , right , bottom для блока тени в IE аналогичны варианту с падающей тенью.

Код приведенный выше дает нам следующий результат, показанный на Рисунке 5.

Рисунок 5: Финальный пример с внутренней тенью, показывающий тень в современных браузерах и в текущих версиях IE

Заключение

В этой статье мы рассмотрели кроссбраузерное решение для создания теней на элементах блочного типа, основывающееся на использовании CSS-свойства box-shadow и использовании фильтров в IE для поддержки этого свойства. В итоге мы получаем поддержку следующими браузерами:

Apple Safari 3+
Google Chrome 2+
Microsoft Internet Explorer 7+
Mozilla Firefox 3.5+
Opera 10.50+

Преимущества используемого решения:

Изображения не используются вообще, что позволяет проводить меньше времени в графичеких редакторах, уменьшает число HTTP запросов и увеличивает производительность;
Не используется JavaScript;
Вы можете поставить тень любого желаемого цвета.

Один недостаток заключается в использовании комбинации CSS-свойств top / bottom и left / right — такие комбинации не поддерживаются IE6, поэтому этот метод не будет работать в нём правильно, если только вы не используете его для элементов с фиксированной высотой. В этом случае вы можете заставить метод работать при помощи замены комбинации свойств top / bottom на top / height и left / right на left / width .

Источник

Safari не работает box shadow