IOS Safari + CSS calc() + переход CSS = мгновенный сбой

Когда я пытаюсь использовать left: -webkit-calc(100% - 100px); (предполагая, что left: 0; является исходным состоянием), он отлично работает в iOS 6.0.1. Но когда я делаю то же самое с transition: left 1s linear;, он мгновенно разбивает Safari каждый раз. Известно ли это ошибка или я что-то не так?

Он также не работает в Safari 5 (без реакции). Но он работает в Firefox и Chrome.

Ответы

Ответ 1

Вы можете исправить это, инициализируя свойство чем угодно, кроме auto:

.menu {
  left: 0;
  transition: left 1s linear;
}

.menu-open .menu {
  left: -webkit-calc(100% - 50px);
  left: calc(100% - 50px);
}

Ответ 2

Это ошибка WebKit в течение некоторого времени. Пока вы можете использовать JS для достижения того же конечного эффекта.

Ответ 3

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

Что работала над выражением calc, используя отрицательный запас:

#example {
  left: 100%;
  margin-left: -100px;
}

Ответ 4

К сожалению, я должен был сделать это, чтобы выполнить аналогичную задачу:

$('.modal').css({
  'height': $(window).height() - 40
});

Ответ 5

Возможно, сделайте что-то вроде этого:

.class{
    left: -webkit-calc(100% - 100px);
    transition: margin-left 1s linear, right 1s linear;
}


.class.open {
    margin-left: -100%;
    right: 100px;
}

ПРЕДУПРЕЖДЕНИЕ: непроверенный

Ответ 6

Я столкнулся с этой проблемой, потратив много времени на тестирование моего адаптивного, а не мобильного телефона 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.

Ответ 7

собрать этот маленький тест, чтобы убедиться, что он когда-либо исправлен. в настоящее время он разбивает Mac Safari 6.0.5 и сафари iOS.

http://jsbin.com/omexek/3/