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 的值较大时，浏览器可能会在元素的边缘上绘制额外的像素，导致背景颜色透过圆角边缘渗透出来，形成黑线。
- 使用
background-clip属性：将background-clip设置为padding-box，可以确保背景颜色仅在元素的内边距区域内显示，而不会渗透到边缘。例如：
.element {
background: red;
border-radius: 10px;
background-clip: padding-box;
}
- 使用伪元素：使用
::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">测试后发现消失了
