html - 我的左侧菜单和子菜单在低带宽情况下覆盖了我的整个页面

Question

我有一个左侧菜单，当我将鼠标悬停在一个菜单项上时，会打开一个子菜单，当我点击子菜单时，如果网速很慢，背景会覆盖我的整个页面，然后会恢复原样。

CSS

@media (min-width: 478px) {
   nav.main-menu {
      position: absolute;
      top: 72px;
      left: 0;
      z-index: 1010;
      overflow: hidden;
      width: 60px;
      height: 100%;
      background: #333333;
      -moz-transform: translateZ(0) scale(1, 1);
      -ms-transform: translateZ(0) scale(1, 1);
      -o-transform: translateZ(0) scale(1, 1);
      -webkit-transform: translateZ(0) scale(1, 1);
      -moz-transition: width 0.05s linear;
      -o-transition: width 0.05s linear;
      -webkit-transition: width 0.05s linear;
      transition: width 0.05s linear;
      transform: translateZ(0) scale(1, 1);
   }

   nav.main-menu > ul {
      margin: 7px 0;
   }

   nav.main-menu li {
      position: relative;
      display: block;
      width: 250px;
   }
}

如何解决这个问题？

Answer 1

删除了这部分并且它工作正常:

 -moz-transform: translateZ(0) scale(1, 1);
  -ms-transform: translateZ(0) scale(1, 1);
  -o-transform: translateZ(0) scale(1, 1);
  -webkit-transform: translateZ(0) scale(1, 1);
  -moz-transition: width 0.05s linear;
  -o-transition: width 0.05s linear;
  -webkit-transition: width 0.05s linear;
  transition: width 0.05s linear;
  transform: translateZ(0) scale(1, 1);