Почему overflow-x:hidden не срабатывает на мобильных?

Question

[SexyMonkey]

Чтоб протянуть фон блока за пределы центрального контейнера использую такую конструкцию.

body {
      overflow-x:hidden
}
.test {
      position:relative
}
.test:before {
      content: '';
      width: 1000rem;
      height: 520rem;
      position: absolute;
      top: 0;
      right: -1000rem;
}

Это прекрасно работает на десктопе, но на мобильных прокрутка не исчезает.
В чём проблема?

Answer 1

[Serj-One]

Мобильные браузеры игнорируют overflow-x:hidden для html и body при использовании <meta name="viewport">
Проблема решается добавлением этого свойства отдельным секциям.

Answer 2

[Станислав Зиненко]

Так же, при установке не срабатывает:

body {
      overflow-x: hidden;
}

Но при установке совместно с html - неожиданно сработало

html, body {
      overflow-x: hidden;
}

Comments

[Игорь Козырев]

все четко так отрабатывает))) спс

Answer 3

[Дмитрий Чуприна]

overflov-x:hidden - синтаксическая ошибка overflow и еще может мобильный браузер не знать overflow-x и еще используй просто

body {
      overflow: hidden
 max-width: 100%
}

или смотря какую ширину нужно

Comments

[SexyMonkey]

Ошибка случайная, в коде её нет.
С overflow: hidden пропадёт вертикальная прокрутка, что недопустимо.

[Дмитрий Чуприна]

SexyMonkey: если height : auto, а не 100%, то не должна пропасть

[SexyMonkey]

Дмитрий Чуприна: Ну как не должна, если overflow: hidden её как раз предназначен для её скрытия?

[Дмитрий Чуприна]

SexyMonkey:
Не совсем. overflow: hidden отображает содержания блочного элемента, если оно целиком не помещается и выходит за область ЗАДАННЫХ размеров. то есть если height auto или ваще не задан что равносильно auto и скрывать не будет, а вот в ширину заданную в 100% все что будет сверх 100 обрежет или скроет как удобно

[Елена]

Дмитрий Чуприна, дуралей