Why doesn't overflow-x:hidden work on mobile?

Question

css

To stretch the background of the block outside the central container, I use this design.

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

This works great on desktop, but on mobile the scrolling doesn't disappear.
What is the problem?

Answer 1

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

Answer 2

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

body {
      overflow-x: hidden;
}

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

html, body {
      overflow-x: hidden;
}

Answer 3

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

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

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