Прокрутка переполнения на масштабированном дочернем элементе: различное поведение по осям X и Y

Question

Вот код, показывающий мою проблему

.container {
  width: 200px;
  height: 200px;
  overflow: auto;
}

.child {
  width: 400px;
  height: 400px;
  /* When scaling down, no more X scrolling because size is 200px, but still Y scrolling :( */
  transform: scale(0.5);
  /* Both axis working the same (no more scrolling) when absolutely positioned */
  /* position: absolute; */
}

/* Irrelevant styling */
.container {
  border: 2px solid palevioletred;
  position: relative;
}

.child {
  background-color: pink;
  transform-origin: top left;
}

<div class="container">
  <div class="child">
    Child
  </div>
</div>

Try to scroll down or right within the box.

• Существует контейнер с фиксированным размером, содержащий дочерний элемент также с фиксированным размером.
• Существует прокрутка переполнения.

• Затем я уменьшаю ребенка с преобразованием, вдвое уменьшая его размер.

  • X-прокрутка исчезает, потому что ширина дочернего элемента составляет 200 пикселей (более конкретно, свойство контейнера scrollWidth соответственно уменьшилось)
  • Прокрутка Y все еще там, а свойство контейнера scrollHeight остается прежним.

Я могу немного понять поведение каждой оси, но не почему они действуют по-разному .

В идеале я бы хотел, чтобы ось Y действовала как ось X.

Если я задаю position:absolute для дочернего элемента, то ось Y действует как ось X ( Обе прокрутки исчезают ).

.container {
  width: 200px;
  height: 200px;
  overflow: auto;
}

.child {
  width: 400px;
  height: 400px;
  position:absolute;
  transform: scale(0.5);
}

/* Irrelevant styling */
.container {
  border: 2px solid palevioletred;
  position: relative;
}

.child {
  background-color: pink;
  transform-origin: top left;
}

<div class="container">
  <div class="child">
    Child
  </div>
</div>

Try to scroll down or right within the box.

То же самое, когда я установил display:inline-block. Обе оси ведут себя одинаково ( На оба свитка не влияет масштаб )

.container {
  width: 200px;
  height: 200px;
  overflow: auto;
}

.child {
  width: 400px;
  height: 400px;
  display:inline-block;
  transform: scale(0.5);
}

/* Irrelevant styling */
.container {
  border: 2px solid palevioletred;
  position: relative;
}

.child {
  background-color: pink;
  transform-origin: top left;
}

<div class="container">
  <div class="child">
    Child
  </div>
</div>

Try to scroll down or right within the box.

Почему в начальном случае у нас другое поведение? И почему в некоторых случаях шкала меняет прокрутку (когда мы использовали position:absolute), а в других - нет (когда мы использовали display:inline-block).

---

В качестве примечания, transform - это визуальный эффект, который не влияет на макет, поэтому логически прокрутка не должна изменяться во всех случаях.

Answer 1

Я считаю, что расхождение в поведении связано с источником трансформации. Когда исходная точка отрегулирована так, что дочерний элемент размещается справа, а не слева (и отображение встроенного блока удалено), горизонтальная прокрутка появляется снова, и дочерний элемент виден только при прокрутке (см. Фрагмент кода). Поскольку дочерняя стандартная «статическая» позиция (даже без преобразования) будет отображаться сверху контейнера, поэтому она не влияет на вертикальную прокрутку так же, как я понимаю.

Как уже отмечали другие, существуют нерешенные задачи в отношении CSS-преобразований. Я не расценил бы это как ошибку (хотя я вижу вашу точку зрения). Возможно, лучшие объяснения / больше ясности станут доступны в будущем от w3c.

.container {
  width: 200px;
  height: 200px;
  overflow: auto;
  border: 2px solid palevioletred;
  position: relative;
}

.child {
  width: 400px;
  height: 400px;
  transform: scale(0.5);
  background-color: pink;
  transform-origin: top right;
}

<div class="container">
  <div class="child">
    Child
  </div>
</div>

Transform-origin changed to top right (as opposed to top left)

Answer 2

На сайте w3.org я нашел несколько запутанных утверждений о переполнении, которое может объяснить, почему реализация несовместима. Они больше похожи на знаки TODO, так как это черновик:

ВЫПУСК 1:

Существуют разногласия по модели прокрутки. 2.1 явно определен что вы прокрутили область content ; содержимое переполняет поле содержимого, и вы бы объединили это переполнение с полем содержимого в найти прокручиваемую область. В частности, это означает, что содержание будет смещено заполнением начальных сторон, но если оно переполнено, оно будет идти прямо к краю на концах сторон. Это то, что Firefox и То есть По крайней мере, некоторые авторы (и авторы спецификаций) вместо этого имеют ментальная модель, что поле прокрутки является то, что прокручивается, поэтому, когда вы прокрутите до конца переполнения, там есть правый / нижний отступ. Chrome / WebKit делают это по крайней мере для оси блока. Они несколько несовместим с линейной осью; есть что-то странное в том, как они обрабатывают линейные ящики.

Кажется, что заполнение оси блока, вероятно, совместимо с честь. Неясно, будет ли заполнение по оси. В дальнейшем нужны эксперименты.

ВЫПУСК 2:

Является ли это описание обработки преобразований достаточно точным?

Примечание:

Прокручиваемый прямоугольник переполнения всегда является прямоугольником в собственная система координат блока, но может быть непрямой в других системы координат из-за преобразований [CSS3-TRANSFORMS]. Это означает полосы прокрутки могут иногда появляться, когда в этом нет необходимости.

В любом случае, кажется, что нам нужно полагаться на «position: absolute» как обходной путь для Chrome. Или трансформируйте контейнер вместо дочернего. Или даже создать дополнительный уровень монетодержателя.

Надеюсь, это поможет!