【CSS】iOS中border显示不全

// React+tailwind.css
      <span
        className={twMerge(classNames(
            "text-xl ml-1.5 px-3.5 w-[50px] h-[44px]",
            "inline-flex items-center justify-center",
            "border-2 rounded-l-xl  border-dashed border-pri-2",
            "text-pri-2 bg-pri-8",
            className
          )
        )}
        style={style}
        key={key}
        id={id}
      >
        {QUESTION_MARK}
      </span>

设计图效果

iPhone 7p上实际效果

在部分iOS设备上，当border设置为dashed时，有些border 显示不全

open AI 给的回复如下：

1. 子像素渲染问题
   在某些情况下，iOS 浏览器对 子像素值 的渲染会导致边框缺失或显示异常。

原因： CSS 中的某些属性（例如宽度 w-[50px]、高度 h-[44px]、边框 border-2）在实际渲染中会产生浮点数值（如 49.9px），导致边框被忽略或未完全渲染。
解决方案： 确保宽度和高度是整数值，并避免浮点运算。

2. border-dashed 样式在某些情况下的渲染问题
   border-dashed 在 iOS 上的渲染有时会不完整，特别是当边框宽度较小时。

原因： iOS WebKit 渲染 dashed 边框时可能出现图形精度问题，导致某些边框段不显示。
解决方案： 改用 border-solid 测试是否是 border-dashed 的问题。

3. inline-flex 与 border 的渲染冲突
   inline-flex 的父子元素布局渲染在某些情况下可能会导致边框缺失，特别是在父元素宽度不足时。

原因：
inline-flex 的宽度可能受到内容大小的限制，导致布局计算错误。
如果 w-[50px] 和 inline-flex 冲突（例如宽度不足以完全显示边框），右侧的边框可能会被剪裁。
解决方案：
将 inline-flex 替换为 flex 或设置明确的宽度：
inline-flex w-[50px] /* 确保宽度足够 */
或者添加 overflow: visible; 防止裁剪：
overflow: visible;

4. iOS 渲染引擎的 Bug
   某些版本的 iOS 浏览器（如 Safari）可能存在边框渲染的 Bug，尤其是与 rounded 和 border-dashed 结合使用时。

原因： iOS WebKit 在渲染 rounded 和 dashed 的边框时，可能会因为抗锯齿或浮点计算问题导致右侧边框不显示。
解决方案：
改变边框样式，使用 border-solid 或移除rounded：
border-solid
rounded-none

其中尝试

1. 增大w的宽度，无效，改变border宽度无效
2. 修改broder-dashed 为 border-solid 确实可以显示出完整的border
3. 添加overflow: visible无效
4. 使用rounded-none无效，使用rounded-sm有效

由于需求要求用dashed border，所以最终添加了rounded-r-sm来解决问题

// React+tailwind.css
      <span
        className={twMerge(classNames(
            "text-xl ml-1.5 px-3.5 w-[50px] h-[44px]",
            "inline-flex items-center justify-center",
            "border-2 rounded-l-xl rounded-r-sm  border-dashed border-pri-2",
            "text-pri-2 bg-pri-8",
            className
          )
        )}
        style={style}
        key={key}
        id={id}
      >
        {QUESTION_MARK}
      </span>