Толкает ли элемент с transform scale соседние элементы при увеличении в 4 раза

Что проверяют

Проверяют понимание того, на каком этапе работает transform. Правильный ответ короткий, поэтому сразу за ним идут уточнения: что произойдёт с соседями, что с прокруткой, что вернёт getBoundingClientRect. Вопрос отделяет знание расчёта раскладки от привычки подбирать значения на глаз.

Как отвечать

Нет, не толкает. transform применяется после расчёта раскладки: размеры и положение в потоке считаются по width, height и отступам, а трансформация лишь меняет то, как готовый прямоугольник рисуется. Соседи остаются на месте, увеличенный вчетверо элемент просто накроет их собой.

Добавьте следствия, за которыми и охотятся:

• transform создаёт контекст наложения, поэтому трансформированный элемент рисуется поверх непозиционированных соседей, а z-index на нём работает без position;
• масштаб растёт от transform-origin, по умолчанию от центра, то есть элемент расползается во все стороны сразу;
• getBoundingClientRect() вернёт увеличенный прямоугольник, а offsetWidth останется прежним: первый про отрисовку, второй про раскладку;
• у предка с overflow: auto появится прокрутка, а overflow: hidden обрежет выступающую часть;
• элемент становится содержащим блоком для потомков с position: fixed.

Если место под увеличение действительно нужно, менять придётся то, что участвует в раскладке: размеры, отступ, ячейку сетки. И скажите, почему масштаб делают трансформацией: она не вызывает пересчёт раскладки и дёшево анимируется, в отличие от анимации width.

Где спотыкаются

Отвечают «не толкает» и останавливаются. Дальше спрашивают, как тогда развести элементы, и кандидат предлагает margin, забыв, что отступ считается от нетрансформированной рамки и подвинет соседа не на то расстояние.

Пытаются поднять элемент через z-index и удивляются, что он и так сверху, либо наоборот, что свойство не помогает. Второе бывает, когда у предка свой контекст наложения: внутри него порядок решается локально и наружу не пробивается.

Считают, что раз раскладка не меняется, то и последствий нет. Попадание курсора идёт по видимой области, поэтому увеличенный элемент перехватывает клики по соседям, и находят это уже тестировщики.