Почему -webkit-transform: translate3d (0, 0, 0) испортится с фиксированными дочерними элементами

Я пытался в течение последних нескольких часов выяснить, почему дочерний элемент позиционировался против своего родителя, а не экрана, хотя он позиционируется как "фиксированный". Очень к счастью, я наткнулся на упоминание о том, что -webkit-transform: translate3d(0, 0, 0) на родителя может заставить вещи пойти наперекосяк. Я использую структуру bootstrap, и поэтому они действительно помещают это свойство в класс .navbar-fixed-top, который имеет один из родительских элементов. Как только я удалил его, ребенок начал позиционировать снова окно просмотра. Поэтому у меня есть два вопроса:

Почему -webkit-transform: translate3d(0, 0, 0) делают эти неприятные вещи?
Почему реестры bootstrap помещают это свойство в класс .navbar-fixed-top?

UPDATE
Кажется, я нашел ответ на второй вопрос. Вот сообщение фиксации:

Прикладной translate3d для модального, установленного на navbar и прикрепленного к браузеру перекрашивать

Вот ответ на второй вопрос:

Любое вычисленное значение, отличное от none для преобразования, приводит к создание как стекирующего контекста, так и содержащего блока. Объект действует как содержащий блок для фиксированных помещенных потомков.

Ответ 1

Относительно вашего первого вопроса:

Вы используете преобразования. Что вызывает проблему.

Взгляните на спецификацию: Модель рендеринга трансформирования

Указание значения, отличного от 'none для свойства' transform устанавливает новую локальную систему координат в элементе, который применяется к.

Таким образом, элемент с фиксированным позиционированием будет относиться к элементу с преобразованием, а не к окну просмотра

Ответ 2

Я использовал этот "хакерский" (- webkit-transform: translate3d (0, 0, 0)), чтобы исправить глюки из масштаба преобразования (некоторые элементы, которые перемещались, когда я взаимодействовал со страницей), но у меня была проблема с позицией исправлено на webkit (я не мог сосредоточиться на фиксированных позиционированных текстовых вводах), и когда я удалил его, он был исправлен. Поскольку я использовал масштаб преобразования только в firefox, у меня не было проблем с его удалением (на webkit я закончил использование zoom, который действует намного лучше, чем transform: scale (но -webkit-transform: translate3d (0, 0, 0) остался там из унаследованного css), и я надеюсь, что поддерживаемый firefox также будет масштабироваться)