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

相关推荐
00后程序员张20 小时前
iOS App 混淆与资源保护:iOS配置文件加密、ipa文件安全、代码与多媒体资源防护全流程指南
android·安全·ios·小程序·uni-app·cocoa·iphone
咕噜签名分发冰淇淋1 天前
内测分发是什么?
ios
2501_916007471 天前
Transporter App 使用全流程详解:iOS 应用 ipa 上传工具、 uni-app 应用发布指南
android·ios·小程序·https·uni-app·iphone·webview
白玉cfc1 天前
【OC】单例模式
开发语言·ios·单例模式·objective-c
Digitally1 天前
比较 iPhone:全面比较 iPhone 17 系列
android·ios·iphone
2501_915909061 天前
HTTPS 错误解析,常见 HTTPS 抓包失败、443 端口错误与 iOS 抓包调试全攻略
android·网络协议·ios·小程序·https·uni-app·iphone
他们都不看好你,偏偏你最不争气2 天前
【iOS】UIViewController
开发语言·macos·ios·objective-c·cocoa
前端小超超2 天前
如何配置capacitor 打包的ios app固定竖屏展示?
前端·ios·web app
CocoaKier2 天前
AI让35岁程序员再次伟大
ios·微信小程序·aigc
库奇噜啦呼2 天前
【iOS】单例模式
ios·单例模式