Когда я пытаюсь использовать left: -webkit-calc(100% - 100px); (предполагая, что left: 0; является исходным состоянием), он отлично работает в iOS 6.0.1. Но когда я делаю то же самое с transition: left 1s linear;, он мгновенно разбивает Safari каждый раз. Известно ли это ошибка или я что-то не так?
Он также не работает в Safari 5 (без реакции). Но он работает в Firefox и Chrome.
Вы можете исправить это, инициализируя свойство чем угодно, кроме auto:
.menu {
left: 0;
transition: left 1s linear;
}
.menu-open .menu {
left: -webkit-calc(100% - 50px);
left: calc(100% - 50px);
}
Это ошибка WebKit в течение некоторого времени. Пока вы можете использовать JS для достижения того же конечного эффекта.
Ни один из ответов, опубликованных до сих пор, не работал у меня.
Что работала над выражением calc, используя отрицательный запас:
#example {
left: 100%;
margin-left: -100px;
}
К сожалению, я должен был сделать это, чтобы выполнить аналогичную задачу:
$('.modal').css({
'height': $(window).height() - 40
});
Возможно, сделайте что-то вроде этого:
.class{
left: -webkit-calc(100% - 100px);
transition: margin-left 1s linear, right 1s linear;
}
.class.open {
margin-left: -100%;
right: 100px;
}
ПРЕДУПРЕЖДЕНИЕ: непроверенный
Я столкнулся с этой проблемой, потратив много времени на тестирование моего адаптивного, а не мобильного телефона iOS, в Chrome. Было много "эластичных" элементов на месте, поэтому я хотел найти решение, которое могло бы охватить все их, по крайней мере, для ранней версии.
Если вы делаете отзывчивый дизайн, используя чисто CSS, взломать его, по крайней мере, сбой:
@media (max-device-width: 1024px) {
* {
-webkit-transition: width 0, top .8s !important;
-moz-transition: width 0, top .8s !important;
-o-transition: width 0, top .8s !important;
transition: width 0, top .8s !important;
}
Я хотел сохранить верхние позиционирующие переходы на месте, поэтому пришлось делать это таким образом.
Это решение может быть лучше, поскольку у него будет некоторое совпадение с людьми, использующими 1024 монитора и Android, но я использовал max-device - вместо max-width, чтобы избежать совпадения с маленькими окнами. Я предполагаю, что 1024 пользователей монитора, вероятно, не используют современный браузер, но хотели бы исправить перекрытие Android.
собрать этот маленький тест, чтобы убедиться, что он когда-либо исправлен. в настоящее время он разбивает Mac Safari 6.0.5 и сафари iOS.