ios设备overflow:hidden失效解决方案

示例代码：

<div
      class="flex p-4 h-60 rounded-3xl relative border-solid border-1 border-gray-200 mt-2 overflow-hidden"
    >
      <div class="w-[70%] flex justify-center items-center">
        <QrcodeVue :value="qrText" :size="100" />
      </div>
      <div class="flex flex-col justify-evenly text-size-xs">
        <p class="font-bold text-sm indent-lg">使用须知</p>
        <p>1、从业人员必须持本证方可上岗工作，并自觉接受卫生监督员的检查。</p>
        <p>2、本证自发证之日起有效期一年，过期作废。</p>
        <p>到期日期: <span class="text-red-500 text-center">有效期一年</span></p>
      </div>
      <div
        class="w-full bg-[#01a6e6] h-[30px] absolute bottom-0 left-0 text-white text-center leading-[30px]"
      >
        电子版健康证明（一证一码）
      </div>
    </div>

期望结果：

实际结果：

问题原因：

在iOS Safari浏览器中，overflow: hidden 属性与圆角（border-radius）结合使用时会出现渲染问题，这是问题的主要原因。

具体原因分析：

1. Webkit渲染引擎的Bug： iOS Safari使用Webkit作为其渲染引擎，该引擎在处理某些CSS属性组合时存在已知的bug。特别是当元素同时应用了overflow: hidden和border-radius时，子元素可能会超出父容器的边界，即使设置了溢出隐藏。
2. 硬件加速和合成层问题： 移动端浏览器为了性能优化，会为某些元素创建独立的合成层（compositing layers）。当这些层与裁剪（clipping）和圆角组合使用时，可能会出现渲染不一致的问题。
3. Masking和Clipping的处理差异： 在iOS Safari中，遮罩（masking）和裁剪（clipping）的处理方式与其他浏览器略有不同。添加-webkit-mask-image: -webkit-radial-gradient(white, black)可以强制浏览器使用遮罩来正确处理溢出内容。

解决：

1.将原来的 overflow-hidden 类替换为自定义的 overflow-hidden-ios 类
2.添加了专门针对 iOS Safari 的 CSS 规则：
.overflow-hidden-ios {
  overflow: hidden;
  -webkit-mask-image: -webkit-radial-gradient(white, black);
}

方案原理：

• overflow: hidden 保持原有的溢出隐藏功能
• -webkit-mask-image: -webkit-radial-gradient(white, black) 创建一个透明度渐变为白色到黑色的径向渐变遮罩，这会强制Safari浏览器正确应用溢出隐藏效果

这是一种广泛认可的解决iOS Safari中overflow和border-radius组合问题的方法，不会对其他浏览器产生负面影响。