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像素、透明颜色、屏幕区域外。

相关推荐
杂雾无尘38 分钟前
开发者必看,全面解析应用更新策略,让用户无法拒绝你的应用更新!
ios·xcode·swift
xiangzhihong82 小时前
使用Universal Links与Android App Links实现网页无缝跳转至应用
android·ios
Digitally4 小时前
如何将iPhone备份到Mac/MacBook
macos·ios·iphone
帅次4 小时前
【iOS设计模式】深入理解MVC架构 - 重构你的第一个App
ios·swiftui·objective-c·iphone·swift·safari·cocoapods
sam.li8 小时前
WebView安全实现(一)
android·安全·webview
Frank学习路上20 小时前
【IOS】XCode创建firstapp并运行(成为IOS开发者)
开发语言·学习·ios·cocoa·xcode
瓜子三百克1 天前
CALayer的异步处理
macos·ios·cocoa
吴Wu涛涛涛涛涛Tao1 天前
一步到位:用 Very Good CLI × Bloc × go_router 打好 Flutter 工程地基
flutter·ios
杂雾无尘1 天前
开发者必看:如何在 iOS 应用中完美实现动态自定义字体!
ios·swift·apple
kymjs张涛1 天前
零一开源|前沿技术周报 #6
前端·ios·harmonyos