Po odświeżeniu strony main nie wraca na właściwe miejsce

pytanie zadane 28 listopada 2020 w HTML i CSS przez KamQiX Dyskutant (9,090 p.)

Cześć,

Tworzę właśnie stronę internetową i chciałem zrobić wysuwany z prawej strony sidebar. Całość działa tak jak na CodePen: https://codepen.io/KamQiX/pen/OJRPWpL

Dodatkowo wklejam kod tutaj:

<html>
<body>
<main>
  <div class="content center">
    <button class="show-sidebar">Show Sidebar</button>
  </div>
 
  <div class="sidebar hide">
    <button class="show-sidebar">Hide Sidebar</button>
  </div>
</main>
</body>
</html>


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

main
{
  width: 100vw;
  height: 200vh;
}

div.content
{
  width: 100vw;
  height: 200vh;
  background-image: url(https://www.nightcity.love/build/images/districts/city-center-2c2defef.jpg);
}

div.sidebar
{
  position: absolute;
  top: 0;
  right: -25vw;
  width: 25vw;
  height: 200vh;
  background-color: #fff;
}

div.hide
{
  visibility: hidden;
  transition: all 0.8s ease-in-out;
}

div.show
{
  visibility: visible;
  transform: Translate(-25vw, 0);
  transition: all 0.8s ease-in-out;
}

div.left
{
  transform: Translate(-25vw, 0);
  transition: all 0.8s ease-in-out 0.2s;
}

div.center
{
  transition: all 0.8s ease-in-out;
}


			$(document).ready(function()
			{
				$('.show-sidebar').click(function()
				{
					$('.sidebar').toggleClass('hide show');
					$('.content').toggleClass('center left');
				});
			});

Problem polega na tym, że właśnie na Codepenie wszystko działa idealnie, a u mnie lokalnie na Xamppie po wysunięciu sidebara i odświeżeniu strony nie wraca ona na właściwe miejsce. W opcji "Zbadaj" Widać jakby cały main był przesunięty w lewo, mimo że sidebar jest schowany. Nie pomaga nawet odświeżanie z CTRL+F4. Aby main wrócił na swoje miejsce muszę otwierać stronę w nowej karcie. Pytanie czy tak dzieje się tylko na Xamppie i to nie wina kodu HTML/CSS/JS, a strona po wrzuceniu na hosting będzie działać czy coś źle zrobiłem.

Przeglądarka Google Chrome, na Edge działa dobrze.

1	komentarz 28 listopada 2020 przez ScriptyChris Mędrzec (190,170 p.) Czy odświeżanie strony z zablokowanym cachem w devtoolsach Chrome pomaga? Możesz pokazać jakie nagłówki są ustawione dla strony wczytywanej przez XAMPP?

komentarz 28 listopada 2020 przez KamQiX Dyskutant (9,090 p.)

Nie wiem jak i nie wiem co się stało, ale miałem z tym problem od wczoraj, a teraz nagle zaczęło działać tak jak powinno, zanim jeszcze spróbowałem zablokować cache w devtoolsach Chrome. CUD!

Poniżej wrzucam nagłówki, ale to już chyba bez znaczenia: