Chrome перезагружает страницу не так, как ожидалось

Question

У меня есть простая html страница с двумя «пробелами»

<div class="space1">
  <div class="arrowleft"></div>
</div>

<div class="space2">
  <div class="arrowright"></div>
</div>

и некоторым кодом js для переключения между этими пробелами

let arrowLeft = document.querySelector(".arrowleft");
let arrowRight = document.querySelector(".arrowright");

arrowLeft.addEventListener("click", function() {
  document.body.classList.add("right");
})

arrowRight.addEventListener("click", function() {
  document.body.classList.remove("right")
})

css Файл выглядит следующим образом:

body{
  width: 200vw;
  position: absolute;
  overflow-x:hidden;
}

body.right {
  left: -100vw;
}

.space1{
  left: 0px;
  width: 100vw;
  height: 100vh;
  background-color: blue;
  position: absolute;
}

.space2{
  left: 100vw;
  width: 100vw;
  height: 100vh;
  background-color: red;
  position: absolute;
}

В chrome, если я нахожусь в space2 и перезагружаю страницу, вместо того, чтобы вернуться в исходное состояние, он перезагружается обратно в space2, но после класса ". вправо "не применяется к телу, стрелка go обратно в пробел1 не работает.

Эта проблема возникает только в chrome и сохраняется даже после удаления кэша. Я пытался применить класс и сразу удалить его, но он не работает.