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

相关推荐
iFlyCai2 小时前
Xcode 16 pod init失败的解决方案
ios·xcode·swift
郝晨妤11 小时前
HarmonyOS和OpenHarmony区别是什么?鸿蒙和安卓IOS的区别是什么?
android·ios·harmonyos·鸿蒙
Hgc5588866611 小时前
iOS 18.1,未公开的新功能
ios
CocoaKier13 小时前
苹果商店下载链接如何获取
ios·apple
zhlx283515 小时前
【免越狱】iOS砸壳 可下载AppStore任意版本 旧版本IPA下载
macos·ios·cocoa
XZHOUMIN1 天前
网易博客旧文----编译用于IOS的zlib版本
ios
爱吃香菇的小白菜1 天前
H5跳转App 判断App是否安装
前端·ios
二流小码农1 天前
鸿蒙开发:ForEach中为什么键值生成函数很重要
android·ios·harmonyos
hxx2211 天前
iOS swift开发--- 加载PDF文件并显示内容
ios·pdf·swift
B.-2 天前
在 Flutter 应用中调用后端接口的方法
android·flutter·http·ios·https