H5 iOS 系統設定 position:fixed 後，Home進入後臺一段時間再進入，元素偶現黑邊。
復現路徑：反覆試驗發現iOS Safari瀏覽器開啟頁面後回到首頁，等待10s後復現機率很大，不行重啟手機試試。
嘗試二分法刪除程式碼到最簡單結構，得出結論：如果position是fixed，box-shadow或border-radius只要有一個設定了，在iOS就會偶現黑邊。
<html 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 對應區域設定大小超出螢幕，那麼左下黑邊就會在螢幕外面，這下也看不到，問題不久解決了麼。
<div style="position: fixed;"> <!-- 設定右下角遠距離一個空點，是的iOS在position: fixed時相容的黑邊在螢幕之外 --> <div style=" position: absolute; top: 5rem; left: 10rem; width: 1px; height: 1px; color: transparent; "></div> </div>
因為是偶現，那就只修改一個，試試是否可行。 事實試驗證明，該方案可行。
心得：相容性問題要麼徹底解決不出現，要麼接受它，觀察出現的規律，找到讓使用者感知不到的方式，如1畫素、透明顏色、螢幕區域外。
