最新遇到一个WKWebView的z-index显示问题
先看一下代码：
<body>
<div style="position:absolute;left:0px;right:0px;top:0px;bottom:0px;z-index:998;background-color:rgba(0,0,0,03)"></div>
<div class="jui-content" style="overflow-x:hidden">
<section id="showSetting" class="view detail-view view-active">
<header class="mui-bar mui-bar-nav" style="padding-right: 15px;">
<h1 class="mui-title">系统设置</h1>
<button type="button" @click="back()" class="mui-left mui-btn mui-btn-link mui-btn-nav mui-pull-left" style="height: 44px;">
<span class="mui-icon mui-icon-left-nav"></span>
</button>
</header>
<div class="mui-content">
<ul class="mui-table-view">
<li class="mui-table-view-cell">
<a>
账号与安全
</a>
</li>
<li class="mui-table-view-cell">
<a>
信息提醒
</a>
</li>
</ul>
<ul class="mui-table-view" style="margin-top:15px">
<li class="mui-table-view-cell">
<a>
错误反馈
</a>
</li>
<li class="mui-table-view-cell">
<a href="#popover-about">
关于小疯鸟
</a>
</li>
<li class="mui-table-view-cell">
<a @click="logout">
退出
</a>
</li>
</ul>
</div>
<footer></footer>
</section>
<div id="popover-about" class="mui-popover" style="left:50%;top:30%;padding: 15px;">
<label class="popover-title">关于</label>
<p class="popover-content">
小疯鸟开票系统是一套集批量导入开票、预约开票、扫描勾选认证发票（简称√扫认证发票）、发票查验、电子发票和商户订单于一体的税务开票软件系统。
</p>
<p class="popover-content">
官方网站：<a href="https://kp.2je.cc" target="_blank">https://kp.2je.cc</a>
</p>
</div>
</div>
</body>
主要结构为：
<body>
<div>mask半透明层</div>
<div>
<div>设置层</div>
<div>弹出关于层</div>
</div>
</body>
显示为，设置层，关于层，关于的半透明背景层
如图PC中主流浏览器显示正常：
image.png
但是在WKWebview中却成这样了：
image.png
已经过测试后发现， overflow-x或者overflow-y单独设置在弹出层的父节点上了，不知道算不算bug。即上例子中的 jui-content的div。
我们可以设置overflow:hidden;但是单独设置overflow-x或者overflow-y就会导致这样情况出现。
网友评论