Переполнение: скрытый на теле сломан в ios6

Я провел некоторое тестирование, и из того, что я вижу, есть ошибка в мобильном Safari на ios6.

При добавлении overflow:hidden в тег body и перемещении элемента из тела с помощью transform:translateX(100%); Он создает дополнительное прокручиваемое пространство для этого элемента. Во всех настольных браузерах он "скрыт".

Вот демо: http://jsfiddle.net/mUB5d/1. Откройте это в Mobile Safari, и вы увидите, что не так.

Может ли кто-нибудь взглянуть на сафари 6 на Mac OS, чтобы увидеть, присутствует ли там ошибка? Кто-нибудь знает об обходном пути, помимо создания другого родителя вокруг моего элемента?

Спасибо за отзыв!

ОТВЕТЫ

Ответ 1

Неа. Safari 6 на Mac не присутствует с ошибкой. Полосы прокрутки отсутствуют.

Я запустил его на OSX Mountain Lion (10.8.2)

enter image description here

Чтобы еще больше ответить на ваш вопрос, причина, по которой это происходит, вероятно, имеет больше общего с рендерингом масштабирования Mobile Safari, чем скрытая ошибка переполнения. Элемент на самом деле скрыт от экрана (обратите внимание ниже, где я прокрутил все вправо, он все еще не показывает мне полный элемент ширины 100% - на самом деле 90% его скрыто.

Вероятно, это имеет какое-то отношение к iframes и масштабированию страницы. Все еще выглядит как ошибка.

Я предполагаю, что вы демонстрируете в JSFiddle из примера реальной жизни. Если вы вернетесь к вашему образцу реальной жизни (помимо области iframe), попробуйте добавить этот метатег в голову, если у вас его еще нет, и это поможет:

<meta name="viewport" content="width=device-width, initial-scale=1">

enter image description here

Ответ 2

Это обычное поведение в iOS (и только для iOS). Вы можете обойти это, объявив overflow: hidden как для элементов html, так и для body. Кроме того, вы должны установить тело position: relative.

Поведение переполнения

Здесь есть несколько вещей. Чтобы понять, почему исправление работает, нам сначала нужно посмотреть, как устанавливается переполнение области просмотра.

  • Переполнение области просмотра определяется настройкой переполнения элемента html.
  • Но до тех пор, пока вы оставите переполнение элемента html по умолчанию (visible), настройка переполнения тела также будет применена к окну просмотра. Т.е. вы можете установить либо html, либо body на overflow: hidden, когда вы нацеливаете область просмотра. Поведение переполнения самого элемента тела не затрагивается - до сих пор.
  • Теперь, если вы установите переполнение элемента html на что-либо, кроме visible, передача из body в viewport больше не выполняется. В вашем конкретном случае, если вы установите оба переполнения на hidden, параметр html будет применен к окну просмотра, а элемент body также скрывает его переполнение.

Это на самом деле случай в каждом разумно современном браузере, а не в iOS.

iOS quirks

Теперь iOS игнорирует overflow: hidden в окне просмотра. Браузер оставляет за собой право показывать контент в целом независимо от того, что вы заявляете в CSS. Это преднамеренно, а не ошибка, и по-прежнему имеет место в iOS 7 и 8. Ничто не может с этим поделать - он не может быть отключен.

Но вы можете обойти это, сделав сам элемент тела, а не видовое окно, скрыть его переполнение. Чтобы это произошло, вы должны сначала установить переполнение элемента html на что-либо, кроме visible, например. до auto или hidden (в iOS нет разницы между ними). Таким образом, настройка переполнения тела не переносится в окно просмотра и фактически привязывается к элементу body, когда вы устанавливаете его на overflow: hidden.

При этом большинство контента скрыто. Но все же есть исключение: элементы, которые расположены абсолютно. Их конечным родителем смещения является область просмотра, а не тело. Если они расположены где-то вне экрана, справа или снизу, вы можете прокручивать их. Чтобы избежать этого, вы можете просто установить элемент body в position: relative, что делает его родителем смещения позиционированного содержимого и не позволяет этим элементам вырваться из поля тела.

Ответ в коде

Существует один последний вопрос, на который нужно обратить внимание: само тело не должно быть больше, чем область просмотра.

Таким образом, тело должно быть установлено на 100% ширины и высоты видового экрана. (Кредит на способ только для CSS - это этот ответ SO. Поля на элементах html и body должны быть равны 0 и html не должен иметь прописку или границу.

Наконец, чтобы иметь дело с заполнением тела, и если вы когда-либо захотите установить границу на теле, сделайте математическую работу с box-sizing: border-box для тела.

Так вот.

html {
  overflow: hidden;

  height: 100%;
  margin: 0;
  padding: 0;
  border: none;
}

body {
  overflow: hidden;
  position: relative;

  box-sizing: border-box;
  margin: 0;
  height: 100%;
}

NB Вы можете установить наложение и границу тела, как вам удобно.

Ответ 3

После того, как я некоторое время боролся с этим, я обнаружил, что теги html и body нуждаются в переполнении, чтобы скрыть переполняющее содержимое. На элементах внутри body скрытые переполнения отлично работают, поэтому наш выбор - дополнительное правило css или элемент оболочки.

Ответ 4

для меня это работает

Я реализовал в левом меню

if($('.left-menu-panel').is(':visible')) {$("body").addClass('left-menu-open');$("html").css('overflow-y','hidden'); $('body').click(function() {$("body").removeClass("left-menu-open") ;$("html").css('overflow-y','visible'); });$('#off-canvas-left').click(function(event){event.stopPropagation();}); }