iOS H5 黑边解决方案

H5 iOS 系统设置 position:fixed 后,Home进入后台一段时间再进入,元素偶现黑边。

复现路径:反复试验发现iOS Safari浏览器打开页面后回到首页,等待10s后复现概率很大,不行重启手机试试。

尝试二分法删除代码到最简单结构,得出结论:如果position是fixed,box-shadow或border-radius只要有一个设置了,在iOS就会偶现黑边。

js 复制代码
<html lang="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 对应区域设置大小超出屏幕,那么左下黑边就会在屏幕外面,这下也看不到,问题不久解决了么。

js 复制代码
<div style="position: fixed;">
        <!-- 设置右下角远距离一个空点,是的iOS在position: fixed时兼容的黑边在屏幕之外 -->
        <div style="
            position: absolute;
            top: 5rem;
            left: 10rem;
            width: 1px;
            height: 1px;
            color: transparent;
        "></div>
</div>

因为是偶现,那就只修改一个,试试是否可行。 事实试验证明,该方案可行。

心得:兼容性问题要么彻底解决不出现,要么接受它,观察出现的规律,找到让用户感知不到的方式,如1像素、透明颜色、屏幕区域外。

相关推荐
比格丽巴格丽抱3 分钟前
flutter项目苹果编译运行打包上线
flutter·ios
网络安全-老纪1 小时前
iOS应用网络安全之HTTPS
web安全·ios·https
1024小神4 小时前
tauri2.0版本开发苹果ios和安卓android应用,环境搭建和最后编译为apk
android·ios·tauri
lzhdim5 小时前
iPhone 17 Air看点汇总:薄至6mm 刷新苹果轻薄纪录
ios·iphone
安和昂5 小时前
【iOS】知乎日报第四周总结
ios
麦田里的守望者江8 小时前
KMP 中的 expect 和 actual 声明
android·ios·kotlin
_黎明9 小时前
【Swift】字符串和字符
开发语言·ios·swift
ZVAyIVqt0UFji11 小时前
iOS屏幕共享技术实践
macos·ios·objective-c·cocoa
hfxns_12 小时前
iOS 18.2 Beta 4开发者预览版发布,相机新增辅助功能
ios
AirDroid_cn1 天前
如何控制自己玩手机的时间?两台苹果手机帮助自律
ios·智能手机·ipad·手机使用技巧·苹果手机使用技巧