IOS Safari、微信小程序 img或者其他标签元素出现黑边、黑线阴影

　　这个问题最开始出现在小程序上，然后在社区找到一个一样得案例

　　案例：https://developers.weixin.qq.com/community/develop/doc/000608420706f0d8f65f4e8c95b800

　　一开始以为是小程序的BUG，后来认真看文字才发现在IOS 的Safari浏览器里就已经存在，ios的BUG了... ，并且复现的概率还挺高。百度，询问无果...   

　　卡了好几天找不到解决方案，真的去TM的ios，以前是IE 现在是IOS，都2023年...

　　大致原因是：

　　在 Safari 浏览器中，当同时使用 background 和 border-radius 属性时，可能会出现重复进入浏览器元素的黑线问题。这个问题通常被称为 “background bleed”（背景渗透）。

背景渗透问题是由于 border-radius 属性的圆角和 background 属性的背景颜色之间的计算误差导致的。当 border-radius 的值较大时，浏览器可能会在元素的边缘上绘制额外的像素，导致背景颜色透过圆角边缘渗透出来，形成黑线。

1. 使用 background-clip 属性：将 background-clip 设置为 padding-box，可以确保背景颜色仅在元素的内边距区域内显示，而不会渗透到边缘。例如：

.element {
  background: red;
  border-radius: 10px;
  background-clip: padding-box;
}

2. 使用伪元素：使用 ::before 或 ::after 伪元素来为元素添加背景色，并将其覆盖在元素上。这样可以避免背景渗透问题。例如：

.element {
  position: relative;
  border-radius: 10px;
}

.element::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: red;
  z-index: -1;
}

这样，使用伪元素的背景色将覆盖在元素上，避免了背景渗透问题。

除此之外，我几乎在网上找不到任何相关问题的答案和资料，所以写了这一篇博客，希望遇到的人留下你们的解决办法。

后续PS：2023-10-11 更新

　　由于一直没找到原因没去深入研究，昨天在开发小伙伴的孜孜不倦中终于排查到！

　　<meta name="viewport" content="width=750,  user-scalable=no"> 居然和viewport设置的content有关，因为我们用于移动端上，方便自适应

　　还原成标准的<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">测试后发现消失了