在放大页面尺寸时，页面变灰，如何解决？

Question

问题：页面放大时出现遮罩层

问题描述：

这是一个商户信息管理系统，登录进去之后，不同功能模块对应不同的选项卡。

问题：

点击右上角的两个按钮，添加"修改密码"或者"修改头像"选项卡之后，当放大页面尺寸时，就会页面就会变灰。

并且点击一下之后，这个灰色的蒙板就会消失。

增加描述：

这个问题仅出现在点击上述两个选项卡的响应按钮，添加选项卡和页面之后。在点击其他功能模块刷新页面之后，就没有这个问题。

调整之前：

调整之后：

这个问题网上找了很久都没找到相关的问题。

同时，因为我在前端开发方面经验尚浅，我不知道怎么去定位问题所在。

请告诉我怎么去定位这个问题。

关于代码上传，我不知道是否应该上传整个页面的代码？因为我定位不了问题。如果需要也请告诉我。我会将代码贴上来

问题定位

非常@老男孩的建议，我定位到了问题，使用检查元素的时候，出现蒙版之后定位到了问题的标签

这是我页面对应的代码

<li class="light-blue" style="width:65px;heigth:45px;"><a data-toggle="dropdown"
                        href="${ctx}/admin/html/infoAndmessage/avatarUpload.jsp"
                        class="dropdown-toggle">
                        <img class="nav-user-photo" id="avatar" alt="头像" src="${ctx}<%=avatarPath%>">
                        <span style="display: none">头像管理</span>
                    </a></li>

请问"::before"是怎么出现的，怎么解决这个问题呢？

补充

我继续定位了问题所在，是在ace.css文件中，设置了.ace-nav > li.open:before 的css样式如下图：

当我把这个背景的css属性过滤了之后，蒙版就消失了。

我尝试解决了一下，将这部分的代码注释了

.ace-nav > li.open:before {
    /*background-color: #000;*/
    opacity: 0.5;
    border-width: 0;
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    content: "";
    display: block;
    height: 2000px;
    width: auto;
    z-index: 1041;
  }

可是不生效，不知道是什么问题。

Answer 1

有蒙版的时候，右击蒙版，审查元素，跟没有蒙版的时候对比下，应该不是同一个元素，代码有的话，当然是好，可能你要考虑下商业安全什么的，，，
没有蒙版的时候：

class="light-blue" 

有蒙版的时候：

class="light-blue open" 

是这个 open 引起的，当具有 open 类的时候，出现了这个伪元素的样式

根据上图就是，缩放的时候，改变了屏幕的像素导致屏幕像素高度<540px，所以应用了这个样式，出现了这种情况，比如，你看我放大的时候，屏幕的像素高度就变小了

Answer 2

你在页面中是否写了弹窗蒙层？然后放大时该弹窗蒙层出来了