Javascript-форум - Некорректно работает код

Доброго времени суток! Столкнулся с проблемой - разные браузеры интерпретируют мой код по-разному. Вот код:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>lock</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>  
<script src="jquery.cookie.js"></script>
<script type="text/javascript">
  $(document).ready(function(){
  $("#setCookie").click(function () {
    var date = new Date();
  date.setTime(date.getTime() + (10 * 1000));
  $.cookie("popup", "", {expires: date, path: '/' });
  $("#bg_popup").hide();
  });
   
  if ( $.cookie("popup") == null )
  {
  setTimeout(function(){
  $("#bg_popup").show();
  }, 0000)
  }
  else { $("#bg_popup").hide();
  }
  });
      </script>
<script type="text/javascript">
//часы
    var time = setInterval(function() {
      var date = new Date();
      document.getElementById("time").innerHTML = (date.getHours() + ":" + date.getMinutes() + ":" + date.getSeconds());
    }, 1000);
//ввод пароля
function addTextToInput(anElement) {
  var text = document.getElementById('password').value;
  if (text != "")
    text += "";
  text += anElement.innerText;
  document.getElementById('password').value = text;
}
//создание пароля
function setPassword()
{
  if(changepassword.value) {
  localStorage.password = changepassword.value;
  window.location.reload(true);
  }
}
</script>
<style>
body {
background: #292929;
}
* {
font-family: Arial, Helvetica, sans-serif;
}
.lockscreen {
position: fixed;
width: 100vw;
height: 100vh;
background: #292929;
left: 0px;
top: 0px;
}
#time {
width: 200px;
color: white;
font-weight: 100;
font-size: 50px;
position: fixed;
text-align: center;
left: calc( 50vw - 100px );
top: 20px;
z-index: 1;
}
.lock {
width: 100px;
height: 100px;
position: fixed;
left: calc( 50vw - 50px );
bottom: 100px;
}
.lock > * {
position: absolute;
}
.bodylock {
width: 60px;
height: 40px;
border: 5px solid white;
border-radius: 5px;
bottom: 10px;
left: 15px;
}
.handlelock {
width: 40px;
height: 30px;
border-left: 5px solid white;
border-top: 5px solid white;
border-right: 5px solid white;
border-bottom: 5px solid transparent;
border-radius: 35px 35px 0 0;
left: 25px;
top: 5px;
}
.circlechink {
width: 5px;
height: 5px;
border-top: 5px solid white;
border-left: 5px solid white;
border-right: 5px solid white;
border-bottom: 5px solid transparent;
border-radius: 8px;
top: 60px;
left: 42.5px;
}
.rectanglechink {
width: 2px;
height: 5px;
border-right: 5px solid white;
border-bottom: 5px solid white;
border-left: 5px solid white;
border-top: 5px solid transparent;
border-radius: 0 0 5px 5px;
top: 65px;
left: 44.25px;
}
.unlocktext {
width: 90vw;
position: fixed;
text-align: center;
left: 5vw;
bottom: 20px;
color: white;
font-weight: 300;
font-size: 20px;
}
#cpasswordform {
display: none;
}
#cpasswordform ~ .passwordform {
left: -100vw;
}
#cpasswordform:checked ~ .passwordform {
left: 0vw;
}
.passwordform {
width: 100vw;
height: 150px;
background: grey;
position: fixed;
color: white;
top: 100px;
z-index: 1;
transition: 0.5s;
border-top: 1px solid white;
border-bottom: 1px solid white;
}
#password {
width: calc( 90vw - 4px );
height: 30px;
}
.fillpassword1, .fillpassword2, .fillpassword3, .fillpassword4, .fillpassword5, .fillpassword6, .fillpassword7, .fillpassword8, .fillpassword9, .fillpassword10, .fillpassword11, .fillpassword12 {
width: 33.3vw;
height: 30px;
background: linear-gradient(white, grey);
border: none;
position: absolute;
border-right: 1px solid grey;
border-left: 1px solid grey;
font-size: 25px;
font-weight: 100;
}
.fillpassword1 {
top: 30px;
left: 0vw;
}
.fillpassword2 {
top: 30px;
left: 33.3vw;
}
.fillpassword3 {
top: 30px;
left: 66.6vw;
}
.fillpassword4 {
top: 60px;
left: 0vw;
}
.fillpassword5 {
top: 60px;
left: 33.3vw;
}
.fillpassword6 {
top: 60px;
left: 66.6vw;
}
.fillpassword7 {
top: 90px;
left: 0vw;
}
.fillpassword8 {
top: 90px;
left: 33.3vw;
}
.fillpassword9 {
top: 90px;
left: 66.6vw;
}
.fillpassword10 {
top: 120px;
left: 0vw;
}
.fillpassword11 {
top: 120px;
left: 33.3vw;
}
.fillpassword12 {
top: 120px;
left: 66.6vw;
}
.modal {
width: 100vw;
height: 100vh;
background: #292929;
color: white;
position: fixed;
z-index: 0;
top: -100vh;
left: 0px;
transition: 0.5s;
}
.modal:target {
width: 100vw;
height: 100vh;
background: white;
color: black;
position: fixed;
z-index: 3;
top: 0vh;
}
#bg_popup {
position: fixed;
z-index: 99999;
background: rgba(0, 0, 0, 0.8);
top: 0;
right: 0;
bottom: 0;
left: 0;
display: none;
}
#popup {
background: white;
width: 100vw;
height: 100vh;
position: fixed;
top: 0px;
left: 0px;
z-index: 3;
}
</style>
</head>
<body>
<!--Форма создания первого пароля-->
<div id="bg_popup">
<div id="popup">
<h1>Добро пожаловать!</h1>
<p>Давайте защитим проект, создав пароль</p>
<font color="red">Убедительная просьба использовать ТОЛЬКО ЦИФРЫ для создания пароля.</font>
<br><input id="changepassword" placeholder="Ваш пароль">
<button type="button" onclick="setPassword()">Сохранить пароль</button>
<br><span>Будьте внимательны при создании пароля. Если вы здесь ввели не тот пароль который хотели, просто удалите содержимое поля ввода, введите нужную комбинацию ЦИФР и только после этого нажмите кнопку "Начать пользование"</span>
<br><a id="setCookie" class="close" href="#" title="Закрыть" onclick="document.getElementById('bg_popup').style.display='none'; return false;">X</a>
</div>
</div>
<!--код экрана блокировки-->
<input type="checkbox" id="cpasswordform">
<div id="time"></div>
<div class="passwordform">
  <form>
    <input type="password" id="password" disabled>
    <br/>
    <button type="button" onclick="addTextToInput(this)" class="fillpassword1">1</button>
    <button type="button" onclick="addTextToInput(this)" class="fillpassword2">2</button>
    <button type="button" onclick="addTextToInput(this)" class="fillpassword3">3</button>
    <br>
    <button type="button" onclick="addTextToInput(this)" class="fillpassword4">4</button>
    <button type="button" onclick="addTextToInput(this)" class="fillpassword5">5</button>
    <button type="button" onclick="addTextToInput(this)" class="fillpassword6">6</button>
    <br>
    <button type="button" onclick="addTextToInput(this)" class="fillpassword7">7</button>
    <button type="button" onclick="addTextToInput(this)" class="fillpassword8">8</button>
    <button type="button" onclick="addTextToInput(this)" class="fillpassword9">9</button>
    <br>
    <input type="reset" value="x" class="fillpassword10">
    <button type="button" onclick="addTextToInput(this)" class="fillpassword11">0</button>
    </form>
</div>
<label for="cpasswordform">
<div class="lock">
<div class="bodylock"></div>
<div class="handlelock"></div>
<div class="circlechink"></div>
<div class="rectanglechink"></div>
</div>
</label>
<div class="unlocktext">Нажмите на замок, затем введите пароль</div>
<!--Модальное окно, в которое автоматически должен переходить пользователь после успешного ввода пароля-->
<div id="menu" class="modal">
<div>
Контент
</div>
</div>
<script>
  if('password' in localStorage) {
  document.forms.test.hidden = false;
  }
  else {
  location.href='#menu'
  }
  </script>
</body>
</html>

Проблема: FF & Edge после сохранения пароля и его ввода в #password ничего не делают, а "лучший" Chrome вообще после сохранения пароля сразу переводит в #menu. Помогите пожалуйста решить проблемку. :-?
P.S. Прошу не обращать внимания на рисованный при помощи css замок, это был эксперимент. А ещё на то, что #popup при обновлении страницы будет показываться не чаще 10сек. Так надо (пока что)

ABitOfJS,

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>lock</title>
<script type="text/javascript">
//часы
        var time = setInterval(function() {
            var date = new Date();
            document.getElementById("time").innerHTML = (date.getHours() + ":" + date.getMinutes() + ":" + date.getSeconds());
        }, 1000);
//ввод пароля
function addTextToInput(anElement) {
    var text = document.getElementById('password').value;
    if (text != "")
        text += "";
    text += anElement.innerText;
    document.getElementById('password').value = text;
    if(localStorage.password == text) location.href='#menu';

}
//создание пароля
function setPassword()
{
    if(changepassword.value) {
    localStorage.password = changepassword.value;
    window.location.reload(true);
    }
}
</script>
<style>
body {
background: #292929;
}
* {
font-family: Arial, Helvetica, sans-serif;
}
.lockscreen {
position: fixed;
width: 100vw;
height: 100vh;
background: #292929;
left: 0px;
top: 0px;
}
#time {
width: 200px;
color: white;
font-weight: 100;
font-size: 50px;
position: fixed;
text-align: center;
left: calc( 50vw - 100px );
top: 20px;
z-index: 1;
}
.lock {
width: 100px;
height: 100px;
position: fixed;
left: calc( 50vw - 50px );
bottom: 100px;
}
.lock > * {
position: absolute;
}
.bodylock {
width: 60px;
height: 40px;
border: 5px solid white;
border-radius: 5px;
bottom: 10px;
left: 15px;
}
.handlelock {
width: 40px;
height: 30px;
border-left: 5px solid white;
border-top: 5px solid white;
border-right: 5px solid white;
border-bottom: 5px solid transparent;
border-radius: 35px 35px 0 0;
left: 25px;
top: 5px;
}
.circlechink {
width: 5px;
height: 5px;
border-top: 5px solid white;
border-left: 5px solid white;
border-right: 5px solid white;
border-bottom: 5px solid transparent;
border-radius: 8px;
top: 60px;
left: 42.5px;
}
.rectanglechink {
width: 2px;
height: 5px;
border-right: 5px solid white;
border-bottom: 5px solid white;
border-left: 5px solid white;
border-top: 5px solid transparent;
border-radius: 0 0 5px 5px;
top: 65px;
left: 44.25px;
}
.unlocktext {
width: 90vw;
position: fixed;
text-align: center;
left: 5vw;
bottom: 20px;
color: white;
font-weight: 300;
font-size: 20px;
}
#cpasswordform {
display: none;
}
#cpasswordform ~ .passwordform {
left: -100vw;
}
#cpasswordform:checked ~ .passwordform {
left: 0vw;
}
.passwordform {
width: 100vw;
height: 150px;
background: grey;
position: fixed;
color: white;
top: 100px;
z-index: 1;
transition: 0.5s;
border-top: 1px solid white;
border-bottom: 1px solid white;
}
#password {
width: calc( 90vw - 4px );
height: 30px;
}
.fillpassword1, .fillpassword2, .fillpassword3, .fillpassword4, .fillpassword5, .fillpassword6, .fillpassword7, .fillpassword8, .fillpassword9, .fillpassword10, .fillpassword11, .fillpassword12 {
width: 33.3vw;
height: 30px;
background: linear-gradient(white, grey);
border: none;
position: absolute;
border-right: 1px solid grey;
border-left: 1px solid grey;
font-size: 25px;
font-weight: 100;
}
.fillpassword1 {
top: 30px;
left: 0vw;
}
.fillpassword2 {
top: 30px;
left: 33.3vw;
}
.fillpassword3 {
top: 30px;
left: 66.6vw;
}
.fillpassword4 {
top: 60px;
left: 0vw;
}
.fillpassword5 {
top: 60px;
left: 33.3vw;
}
.fillpassword6 {
top: 60px;
left: 66.6vw;
}
.fillpassword7 {
top: 90px;
left: 0vw;
}
.fillpassword8 {
top: 90px;
left: 33.3vw;
}
.fillpassword9 {
top: 90px;
left: 66.6vw;
}
.fillpassword10 {
top: 120px;
left: 0vw;
}
.fillpassword11 {
top: 120px;
left: 33.3vw;
}
.fillpassword12 {
top: 120px;
left: 66.6vw;
}
.modal {
width: 100vw;
height: 100vh;
background: #292929;
color: white;
position: fixed;
z-index: 0;
top: -100vh;
left: 0px;
transition: 0.5s;
}
.modal:target {
width: 100vw;
height: 100vh;
background: white;
color: black;
position: fixed;
z-index: 3;
top: 0vh;
}
#bg_popup {
position: fixed;
z-index: 99999;
background: rgba(0, 0, 0, 0.8);
top: 0;
right: 0;
bottom: 0;
left: 0;
display: none;
}
#popup {
background: white;
width: 100vw;
height: 100vh;
position: fixed;
top: 0px;
left: 0px;
z-index: 3;
}
</style>
</head>
<body>
<!--Форма создания первого пароля-->
<div id="bg_popup">
<div id="popup">
<h1>Добро пожаловать!</h1>
<p>Давайте защитим проект, создав пароль</p>
<font color="red">Убедительная просьба использовать ТОЛЬКО ЦИФРЫ для создания пароля.</font>
<br><input id="changepassword" placeholder="Ваш пароль">
<button type="button" onclick="setPassword()">Сохранить пароль</button>
<br><span>Будьте внимательны при создании пароля. Если вы здесь ввели не тот пароль который хотели, просто удалите содержимое поля ввода, введите нужную комбинацию ЦИФР и только после этого нажмите кнопку "Начать пользование"</span>
<br><a id="setCookie" class="close" href="#" title="Закрыть" onclick="document.getElementById('bg_popup').style.display='none'; return false;">X</a>
</div>
</div>
<!--код экрана блокировки-->
<input type="checkbox" id="cpasswordform">
<div id="time"></div>
<div class="passwordform">
    <form name="test" >
        <input type="password" id="password" disabled>
        <br/>
        <button type="button" onclick="addTextToInput(this)" class="fillpassword1">1</button>
        <button type="button" onclick="addTextToInput(this)" class="fillpassword2">2</button>
        <button type="button" onclick="addTextToInput(this)" class="fillpassword3">3</button>
        <br>
        <button type="button" onclick="addTextToInput(this)" class="fillpassword4">4</button>
        <button type="button" onclick="addTextToInput(this)" class="fillpassword5">5</button>
        <button type="button" onclick="addTextToInput(this)" class="fillpassword6">6</button>
        <br>
        <button type="button" onclick="addTextToInput(this)" class="fillpassword7">7</button>
        <button type="button" onclick="addTextToInput(this)" class="fillpassword8">8</button>
        <button type="button" onclick="addTextToInput(this)" class="fillpassword9">9</button>
        <br>
        <input type="reset" value="x" class="fillpassword10">
        <button type="button" onclick="addTextToInput(this)" class="fillpassword11">0</button>
        </form>
</div>
<label for="cpasswordform">
<div class="lock">
<div class="bodylock"></div>
<div class="handlelock"></div>
<div class="circlechink"></div>
<div class="rectanglechink"></div>
</div>
</label>
<div class="unlocktext">Нажмите на замок, затем введите пароль</div>
<!--Модальное окно, в которое автоматически должен переходить пользователь после успешного ввода пароля-->
<div id="menu" class="modal">
<div>
Контент
</div>
</div>
<script>
    if('password' in localStorage) {
    document.forms.test.hidden = false;
    }
    else bg_popup.style.display = 'block';
    </script>
</body>
</html>