div box-shadow на iPad

Question

div box-shadow на iPad

0

В настоящее время я разрабатываю веб-приложение с оптимизированным сенсорным экраном. Часть дизайна концепции включает в себя простоту навигации, поэтому я разработал отличный симпатичный div, который имеет событие "щелчок" или "касание", которое выглядит довольно красиво, когда вы касаетесь его.

Это отлично работает на веб-браузере и браузере Android, но когда я использую его в Safari на iPad, он не отображает тень. Весь мой синтаксис кажется правильным, поэтому я могу заключить, что это ошибка или не поддерживается.

Мой вопрос: кто-нибудь сталкивался с этой проблемой и обнаружил исправление или работу?

jsFiddle

CSS:

div.touch-button:active {
    width: 300px;
    border: 1px solid #ccc;
    padding: 10px;
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    box-shadow: none;
}

div.touch-button {
    width: 300px;
    border: 1px solid #ccc;
    padding: 10px;
    -moz-box-shadow: 0 0 5px rgba(0,0,0,0.5);
    -webkit-box-shadow: 0 0 5px rgba(0,0,0,0.5);
    box-shadow: 0 0 5px rgba(0,0,0,0.5);
}

Michael Smith 05 май 2014, в 08:40

Источник

Теги:

html

css

ios

css3

ipad

3 ответа

0

Использовать -webkit-внешний вид: нет; для переопределения по умолчанию, попробуйте это.

div.touch-button {
    width: 300px;
    border: 1px solid #ccc;
    padding: 10px;
    -webkit-appearance: none;
    -moz-box-shadow: 0 0 5px rgba(0,0,0,0.5);
    -webkit-box-shadow: 0 0 5px rgba(0,0,0,0.5);
    box-shadow: 0 0 5px rgba(0,0,0,0.5);
}

div.touch-button:active {
    width: 300px;
    border: 1px solid #ccc;
    padding: 10px;
    -webkit-appearance: none;
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    box-shadow: none;
}

Ganesh Kumar G 05 май 2014, в 05:50

0

Вы должны использовать тень окна перед -moz-box-shadow и -webkit-box-shadow. Для меня это в прошлом решало ту же проблему.

div.touch-button {
    width: 300px;
    border: 1px solid #ccc;
    padding: 10px;    
    box-shadow: 0 0 5px rgba(0,0,0,0.5);
    -moz-box-shadow: 0 0 5px rgba(0,0,0,0.5);
    -webkit-box-shadow: 0 0 5px rgba(0,0,0,0.5);
}

Animesh 05 май 2014, в 05:05

0

Извините, это не сработало. Похоже, что есть небольшая тень (около 1 пикселя), мне нужно очень щуриться, чтобы увидеть ее. Увеличение тени, похоже, тоже не исправит.
Michael Smith 06 май 2014, в 00:54

Ещё вопросы

Извините, это не сработало. Похоже, что есть небольшая тень (около 1 пикселя), мне нужно очень щуриться, чтобы увидеть ее. Увеличение тени, похоже, тоже не исправит.

Michael Smith · Accepted Answer · 2014-05-06T05-45-00.000Z

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

Это было связано с настройками видового экрана.

NOT CORRECT: <meta name="viewport" content="width=device-width"/>

CORRECT: <meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0"/>

Ваша проблема была связана с тем, что тень от блока не появлялась в сафари, и то, что вы здесь изменили, отключит масштабирование и сохранит его до первоначального размера, который был разработан.
Райдер прав. Вы можете попробовать это вместо этого: <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=yes"> . Я нашел этот обходной путь, пытаясь решить проблему масштабирования. Что это не так, но это помогло решить проблему с тенью в iOS в альбомном виде в моем коде.