Что не так с chrome?

Question

[leeroyjenkins176]

Есть такой код, где абсолютно позиционированный элемент выходит за правую часть экрана, а в body отсекается лишнее

<div class="container">
		<div class="el"></div>
	</div>

body {
	margin: 0;
	overflow-x: hidden;
}
.container {
	position: relative;
	background-color: #00f;
	height: 100vh;
}
.el {
	width: 300px;
	height: 300px;
	background-color: #f00;
	position: absolute;
	right: 0;
	transform: translateX(50%)
}

В firefox все отлично, а в chrome происходят не понятные вещи (второй скрин).
Во-первых, позиционирование блока живет своей жизнью. На некоторой ширине экрана красного блока вообще не видно, на некоторой справа появляется пустота.
Во-вторых, на скрине ширина области видимости 420px, при этом инспектор показывает, что синий контейнер тоже 420px. Плюс снизу пустота, хотя высота блока 100vh
Это нормальное поведение, описанное в спецификации, или баг в хромиум браузерах?

Demo

Comments

[IvanU7n]

а meta viewport прописан? сталкивался с таким поведением браузеров на Блинке при переполнении по ширине

[leeroyjenkins176]

IvanU7n, да, в конце есть ссылка на демо

[Александр Васильев]

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

??

[leeroyjenkins176]

Александр Васильев, это сообщение мне адресовано? Что вас смущает в данной записи?

[IvanU7n]

leeroyjenkins176, ссылку не заметил

всё работает нормально если разделить body и :root:

:root { overflow-x: hidden; }
body { margin: 0; }

если я правильно помню, переполняется всё же :root (т.е. html), а не body

[Александр Васильев]

leeroyjenkins176, просто спросил, тк с мобильного в демо код не посмотришь. Но уже почитал, что все ок

[leeroyjenkins176]

IvanU7n, кажется, причина в другом. Только что заметил, что overflow: hidden на body вообще не дает никакого эффекта. Но срабатывает для html или .container

[IvanU7n]

leeroyjenkins176, ну я это как бы и имел ввиду — "окном" где может быть скроллинг является html, и если я правильно помню, заставить скролится body почти нереально

там вообще с html и body беда в плане что где работает, я обычно в начале пробую :root и если не помогает, то пробую body

[szQocks]

leeroyjenkins176, https://developer.mozilla.org/ru/docs/Web/CSS/transform

[szQocks]

leeroyjenkins176, если не вдупляешь, что такое содержащий блок, то просто добавь контейнеру overflow: hidden;

и выбирай что-то одно, зачем тебе абсолютное позиционирование и тут же transform: translateX ? но в твоём случае раз ты хочешь сделать его абсолютом, то transform: translateX - тебе не нужен там, просто сделай блоку right: 300px; так как ширина твоего блока 300 пикселей

[szQocks]

хром кстати как раз таки правильно и отображает

[leeroyjenkins176]

если не вдупляешь, что такое содержащий блок, то просто добавь контейнеру overflow: hidden;

Я не понимаю, какое отношение имеет это к моему вопросу. Даже если я уберу transform и оставлю только right: -150px, то проблема останется.

и выбирай что-то одно, зачем тебе абсолютное позиционирование и тут же transform: translateX ?

Потому что они работают совершенно по разному, одно позиционирует относительно relative-блока в данном случае, а второе относительно собственного размера.

то transform: translateX - тебе не нужен там, просто сделай блоку right: 300px; так как ширина твоего блока 300 пикселей

Это просто демка, которая показывает проблему. В моей верстке данный блок имеет динамическую ширину.

[szQocks]

leeroyjenkins176,

Я не понимаю, какое отношение имеет это к моему вопросу. Даже если я уберу transform и оставлю только right: -150px, то проблема останется.

- да останется, т.к блок который имеет position: absolute - это содержащий блок

[Aetae]

Ну и не используйте hidden для обрезки говна, используйте clip. Потому что hidden всё ещё можно проскроллить.

[leeroyjenkins176]

szQocks, что ты прицепился к этому "содержащему блоку", он тут вообще ни к чему
Выше я уже писал, что почему-то overflow: hidden на body не работает.
Из документации

UAs must apply the 'overflow' property set on the root element to the viewport. When the root element is an HTML "HTML" element or an XHTML "html" element, and that element has an HTML "BODY" element or an XHTML "body" element as a child, user agents must instead apply the 'overflow' property from the first such child element to the viewport, if the value on the root element is 'visible'. The 'visible' value when used for the viewport must be interpreted as 'auto'. The element from which the value is propagated must have a used value for 'overflow' of 'visible'.

Таким образом, если у html установлено значение overflow: visible, а оно такое по умолчанию, то у body будет то же overflow: visible
Отсюда в хроме горизонтальный скрол. Firefox живет по своим правилам, судя по всему.
Дело раскрыто

[leeroyjenkins176]

Aetae, Я хотел разобраться в причине такого поведения. Для решения проблемы можно было применить overflow: hidden к контейнеру, и было бы все ок

[Вадим]

Aetae, Давайте поддерживать тут дух профессионального сообщества, а не соц сетей.
https://qna.habr.com/help/rules

5.2. Экспрессивную лексику. Запрещены любые формы размещения экспрессивных слов и выражений. Это означает, что любые реплики, содержащие экспрессивную лексику, будут удалены, даже если экспрессивные выражения размещены в составе url (для маскировки нецензурных url можно использовать сервис сокращения ссылок goo.gl). Мы намеренно не ограничиваем перечень запрещенных форм употребления экспрессивной лексики путём подробного перечисления. Сами понимаете, народ у нас изобретательный. Кто-то догадается нецензурное слово из смайликов выложить, а потом будет всех уверять, что мы — деспоты, ограничили его доступ к ресурсу за то, что нашими правилами не было запрещено.