汉堡按钮转换为 X 按钮，但刷新时不会返回为汉堡按钮

Question

为什么当一个人点击汉堡包按钮时转换到 X 按钮并决定刷新并且 X 按钮仍然存在？刷新网站后如何让汉堡按钮再次出现？

这是我网站的链接：http://dannysaavedra.com/photobeta

这是我在 CSS 中的汉堡按钮和 X 按钮的代码。

这只发生在 Firefox 浏览器中。

/*Begin Hamburger Menu*/
#menu {
  position: fixed;
  top:17px;
  right: 20px;
  height: 28px;
  width: 35px;
  cursor: pointer;
  z-index: 7;
}

.nav-trigger {
  cursor: pointer;
  clip: rect(0, 0, 0, 0);
  position: fixed;
}

label {
  position: absolute;
  height: 100%;
  width: 100%;
  cursor: pointer;
}

#menuButton,
#menuButton:before,
#menuButton:after {
  cursor: pointer;
  position: fixed;
  top: 30px;
  right: 20px;
  z-index: 2;
  border-radius: 1px;
  height: 5px;
  width: 35px;
  background-color: white;
  content: '';
}

.nav-trigger:checked + #menuButton:before,
.nav-trigger:checked + #menuButton:after {
  top: 30px;
  right:20px;
  background-color: red;
}

#menuButton:before {
  top: 20px;
}

#menuButton:after {
  top: 40px;
}

.nav-trigger:checked + #menuButton:after {
  transform: rotate(-45deg);
}

.nav-trigger:checked + #menuButton {
  background-color: transparent;
}

.nav-trigger:checked + #menuButton:before {
  transform: rotate(45deg);
}

.nav-trigger + #menuButton:before,
.nav-trigger + #menuButton:after {
  transition: all 200ms ease-in-out;
}

.nav-trigger:checked + #menuButton:before,
.nav-trigger:checked + #menuButton:after {
  transition: all 200ms ease-in-out;
}

.nav-trigger + #menuButton,
.site-wrap {
  transition: left 0.2s;
}

.nav-trigger + #menuButton {
  right: 20px;
  transition: right 0.2s;
  transition: all 10ms ease-in-out;
}

.nav-trigger:checked ~ .site-wrap {
  left: -300px;
  box-shadow: 0 0 5px 5px rgba(0, 0, 0, 0.5);
  transition: left 0.2s;
}

Answer 1

编辑： 似乎 :checked 没有在 Firefox 中重置。我发现了一个类似的主题，建议将autocomplete="off" 添加到给定元素。找到话题here。

旧： 尝试将 -webkit-transition 添加到所有转换中，如下所示：

-webkit-transition: someTransition;
transition: someTransition;

变换也是如此。