- 作者：老汪软件技巧
- 发表时间：2024-10-12 11:03
- 浏览量：
H5 iOS 系统设置 position:fixed 后，Home进入后台一段时间再进入，元素偶现黑边。
复现路径：反复试验发现iOS Safari浏览器打开页面后回到首页，等待10s后复现概率很大，不行重启手机试试。
尝试二分法删除代码到最简单结构，得出结论：如果position是fixed，box-shadow或border-radius只要有一个设置了，在iOS就会偶现黑边。
"en" style="font-size: 200px;" data-arp=""><head>
<title>iOS黑边试验title>
head>
<body>
<div style="height: 100rem">
<div style="
width: 100px;
height: 100px;
background: blue;
margin-top: 20px;
margin-left: 200px;
">div>
<div style="
width: 100px;
height: 100px;
background: blue;
margin-top: 20px;
margin-left: 200px;
">div>
<div style="
left: 0.3rem;
width: 100px;
height: 100px;
z-index: 99;
box-sizing: border-box;
background: blue;
border-radius: 100%;
margin-top: 20px;
margin-left: 200px;
">div>
<div style="
left: 0.3rem;
width: 100px;
height: 100px;
z-index: 99;
box-sizing: border-box;
background: blue;
box-shadow: 0 0.06rem 0.16rem rgba(0, 0, 0, 0.8);
border-radius: 100%;
margin-top: 20px;
margin-left: 200px;
">div>
<div style="
left: 0.3rem;
width: 1rem;
height: 1rem;
z-index: 99;
box-sizing: border-box;
background: blue;
box-shadow: 0 0.06rem 0.16rem rgba(0, 0, 0, 0.28);
margin-top: 20px;
margin-left: 200px;
">div>
<div style="
left: 0.3rem;
height: 1rem;
width: 1rem;
border-radius: 50%;
background: blue;
box-shadow: 0 0.08rem 0.2rem 0 hsla(0, 0%, 53%, 0.5);
z-index: 50;
display: block;
margin-top: 20px;
margin-left: 200px;
">div>
<div id="0" style="
position: fixed;
width: 100px;
height: 100px;
background: red;
border-color: blue;
box-shadow: 0 0.06rem 0.16rem green;
bottom: 7.58rem;
">div>
<div id="1" style="
position: fixed;
width: 100px;
height: 100px;
background: red;
border-color: blue;
bottom: 6.58rem;
">div>
<div id="2" style="
position: fixed;
width: 100px;
height: 100px;
border-radius: 100%;
border-color: blue;
background: red;
bottom: 5.58rem;
">div>
<div id="3" style="
position: fixed;
left: 0.3rem;
width: 100px;
height: 100px;
z-index: 99;
box-sizing: border-box;
background: red;
border-color: blue;
border-radius: 100%;
bottom: 4.58rem;
">div>
<div id="4" style="
position: fixed;
left: 0.3rem;
width: 100px;
height: 100px;
z-index: 99;
box-sizing: border-box;
background: red;
border-color: blue;
box-shadow: 0 0.06rem 0.16rem rgba(0, 0, 0, 0.8);
border-radius: 100%;
bottom: 3.58rem;
">div>
<div id="5" style="
position: fixed;
left: 0.3rem;
width: 1rem;
height: 1rem;
z-index: 99;
box-sizing: border-box;
background: red;
border-color: blue;
box-shadow: 0 0.06rem 0.16rem rgba(0, 0, 0, 0.28);
border-radius: 100%;
bottom: 2.58rem;
">div>
<div id="6" style="
position: fixed;
bottom: 1.2rem;
left: 0.3rem;
height: 1rem;
width: 1rem;
border-radius: 50%;
background: red;
border-color: blue;
box-shadow: 0 0.08rem 0.2rem 0 hsla(0, 0%, 53%, 0.5);
z-index: 50;
display: block;
">div>
<img id="7" style="
position: fixed;
bottom: 1.2rem;
left: 2rem;
height: 1rem;
width: 1rem;
z-index: 50;
display: block;
" src="https://p0.meituan.net/mallimages/98431b46d38c7b82466f7b6682d6040f2055.png">div>
<div id="desc" style="position: fixed;
bottom: .50rem;font-size: 50px"> 0(100, 100}) 1(100, 100}) 2(100, 100}) 3(100, 100}) 4(100, 100}) 5(200, 200}) 6(200, 200})div>
<script>
setTimeout(() => {
let str = '';
for(let i = 0; i < 7; i++) {
let div = document.getElementById('' + (i));
let width = div.offsetWidth;
let height = div.offsetHeight;
str += ` ${i}(${width}, ${height}})`;
}
document.getElementById('desc').textContent = str;
}, 3000);
script>
body>html>
在实际工程项目中直接删除box-shadow和border-radius验证，发现还有黑边....
但是，在实际操作过程中，我发现这个右下黑边是在内容大小外面。我有个大胆的想法，接受有黑边事实，但是把 position:fixed 对应区域设置大小超出屏幕，那么右下黑边就会显示在屏幕外面，用户感知不到，间接解决问题。
"position: fixed;">
<div style="
position: absolute;
top: 5rem;
left: 10rem;
width: 1px;
height: 1px;
color: transparent;
">div>
因为是偶现，那就只修改一个，试试是否可行。事实试验证明，该方案可行。
心得：兼容性问题要么彻底解决不出现，要么接受它，观察出现的规律，找到让用户感知不到的方式，如1像素、透明颜色、屏幕区域外。
