一个 H5 装饰按钮在 Android WebView 和 iOS Safari 上的两次渲染排查

一个移动 H5 页面里有个固定在右下角的小按钮。按钮本身不复杂：圆角胶囊、渐变底色、生日图标、右侧气球纹理、左上角高光纹理，收起时会变成一个窄按钮。

麻烦点在装饰层。为了贴近设计稿，按钮里用了负坐标纹理、mix-blend-mode、半像素描边、overflow: hidden、圆角和动画。Chrome 桌面看起来正常，不代表移动 WebView 也稳定。这个按钮先后暴露了两个问题：

• Android WebView 上，按钮左上角多出一块异常区域；隐藏 .birthday-privilege-entry__texture 后，异常消失。
• iOS Safari 上，Chrome 正常，但按钮左侧边缘像多了一条边框；最后通过显式 WebKit mask 稳住圆角裁剪。

最后稳定下来的写法大概是这样：

.birthday-privilege-entry {
  overflow: hidden;
  border-start-start-radius: 100px;
  border-start-end-radius: 100px;
  border-end-start-radius: 100px;
  border-end-end-radius: 100px;
  isolation: isolate;

  // 本例 Safari 的圆角边缘异常在增加实心 mask 后恢复，具体绘制与合成机制尚未确认。
  -webkit-mask-image: -webkit-radial-gradient(#fff, #000);
}

两次排查都需要检查装饰层与混合、裁剪的交互，不能只围绕布局和 z-index 调整。具体是否发生了同一种合成异常，还没有确认。

这个按钮同时使用负坐标纹理、圆角裁切和混合模式。排查时需要观察这些层共同作用，不能只调整边框。完整内容见装饰按钮的完整结构弹窗。

Android：隐藏 texture 后恢复正常

Android 那次的现象是按钮左上角多出异常色块。设备 UA 里能看到 Android 12、Chrome 95、wv，也就是 App 内 WebView 环境。

最有效的隔离动作是：

.birthday-privilege-entry__texture {
  visibility: hidden;
}

隐藏 texture 后异常消失，说明异常和这层强相关，排查范围缩到了它的样式及与其他层的交互。这个结果还不能单独证明素材或 Android WebView 有问题，也不能排除 texture 与背景、描边或裁剪共同触发异常，需要继续分别隔离：

/* 只保留图片，不混合 */
.birthday-privilege-entry__texture {
  mix-blend-mode: normal;
}

/* 保留混合，但让它不跑到圆角外面 */
.birthday-privilege-entry {
  -webkit-mask-image: -webkit-radial-gradient(#fff, #000);
}

/* 视觉允许时，直接把纹理预合成到素材里 */
.birthday-privilege-entry__texture {
  display: none;
}

如果 mix-blend-mode: normal 后恢复，就得到混合模式相关的触发线索；补 mask 后恢复，则说明改变遮罩条件有效，还不能单独证明内部合成过程。如果预合成素材能保持需要的外观，也可以评估去掉运行时 blend。

这次需要保留纹理效果，所以没有直接删图，而是尝试调整父级裁剪。如果装饰可以舍弃，移除纹理也是有效方案；是否保留，取决于设计要求和设备上的验证结果，不必为了保住一层 CSS 继续叠兼容写法。

iOS：Chrome 正常，Safari 左边多出边框

iOS 那次更像典型 WebKit 视觉边界问题。桌面 Chrome 或 Android Chrome 看着没问题，Safari 上按钮左侧却像多了一条边框。

这个现象有两个候选触发点：

• ::after 伪元素用了 border: 0.5px solid #fff 和 mix-blend-mode: soft-light。
• texture 作为负坐标装饰层参与混合，WebKit 可能把它作为单独图层处理。

0.5px 本身可以用。它叠在圆角裁剪、混合模式、设备像素比和 WebKit 合成层里以后，已经不再是普通静态描边。Safari 最后看到的可能是一条被合成后更明显的左侧亮边，而不是一个被柔化的 soft-light 描边。

稳定版本做了两件事：

.birthday-privilege-entry {
  overflow: hidden;
  border-start-start-radius: 100px;
  border-start-end-radius: 100px;
  border-end-start-radius: 100px;
  border-end-end-radius: 100px;

  // 本例 Safari 的圆角边缘异常在增加实心 mask 后恢复，具体绘制与合成机制尚未确认。
  -webkit-mask-image: -webkit-radial-gradient(#fff, #000);
}

.birthday-privilege-entry::after {
  border: 0.5px solid #fff;
  border-start-start-radius: inherit;
  border-start-end-radius: inherit;
  border-end-start-radius: inherit;
  border-end-end-radius: inherit;
  mix-blend-mode: soft-light;
}

第一件事是给父级增加显式 mask。overflow: hidden 负责溢出裁剪，mask-image 是图像遮罩。MDN 的 mask-image 文档说明，mask 会根据 alpha 或 luminance 决定元素哪些区域可见。这里使用实心 radial gradient，没有设计渐隐效果；加上这条声明后，本例的圆角边缘恢复了正常。它具体怎样改变 WebKit 的绘制与合成处理，尚未通过图层记录确认。

第二件事是伪元素描边的圆角逐个继承父级 logical corner。这样收起态改变右侧圆角时，描边层也跟着变，不会留下自己的旧圆角或边界。

这类修法最好保留注释。-webkit-mask-image: -webkit-radial-gradient(#fff, #000) 看起来像老式 hack；没有 Why 注释，后续 review 很容易把它删掉。

最小 playground

这里放了一个自包含 playground，移动端可以直接扫码打开：

打开 playground

playground 里有四个模式：

• 风险组合：负坐标 texture、color-dodge、半像素 soft-light 描边和圆角裁剪同时存在。
• 隐藏 texture：模拟 Android 那次的最小隔离动作。
• 加 WebKit mask：模拟最终稳定修法。
• 预合成思路：去掉运行时 blend，用普通背景和 inset shadow 表达接近效果。

这个 playground 不承诺在所有设备上都复现异常。它的用途是让读者快速切换变量，理解这类问题为什么要从 texture、blend、border 和 mask 几个方向拆，而不是看到 Chrome 正常就结束排查。

为什么不是单纯的 border 问题

只看 iOS 截图，可以先怀疑左侧描边或圆角裁剪；Android 那次则要从隐藏后恢复的 texture 层查起。两次现象不能直接互相解释，也不能只给它们套用同一个 border 修复。

更合理的模型是：

WebKit 的 Layers 文章解释过，浏览器不会把 DOM 元素逐个直接画到屏幕上。元素会先绘制到 layers / surfaces，再按顺序合成；元素类型、CSS 属性和图层交互都可能生成新的 layer。这个模型提供了共同的排查方向，但 Android 和 iOS 的两个现象还没有通过图层记录确认是同一种底层问题，需要分别做对照。

下次怎么排查

移动 WebView 边缘异常时，排查顺序先从最小隐藏层开始：

1. 先找最小隐藏层。把纹理图、伪元素、阴影层、描边层逐个 visibility: hidden，确认隐藏哪一层后恢复。
2. 再关高风险声明。优先关 mix-blend-mode、filter、opacity、transform、border: 0.5px、overflow: hidden。
3. 检查图片本身。看素材是否有透明底、半透明边缘、暗色底、非整数尺寸或被 CSS 拉伸。
4. 检查裁剪边界。border-radius + overflow: hidden 不稳定时，尝试 -webkit-mask-image 或 clip-path: inset(0 round ...)。
5. 评估预合成。装饰层只是为了接近设计稿时，运行时 mix-blend-mode 未必值得保留。把高光、纹理、描边合进 PNG / WebP，通常比让移动端实时混合更稳。

如果能连接 Safari Web Inspector，可以打开 Layers 视图看相关元素是否被拆成独立合成层。WebKit 的 Layers 工具本来就是为了观察 layer 创建原因、绘制次数、内存成本和合成顺序。

修法选择

保留原有视觉、简化运行时效果和预合成素材，改动成本不同。可以按侵入程度从低到高尝试：

这次选择的是第一档：保留视觉效果，用 mask 明确裁剪边界，并在代码里写清楚原因。如果后续某个设备仍然异常，就应该往「预合成素材」方向走，而不是继续在运行时叠更多 blend / filter。

总结

这个按钮的两次异常提供了不同线索：Android WebView 上隐藏 texture 后色块消失，iOS Safari 的圆角边缘则在增加显式 mask 后恢复；描边圆角逐个继承父级，也让收起态的边界保持一致。负坐标纹理、混合模式、半像素描边和圆角裁剪需要共同检查，但现有结果不能证明两端是同一种底层故障。

桌面 Chrome 正常、playground 能切换模式，都不能替代目标 WebView 和 Safari 的设备验证，局部有效的兼容写法也需要保留适用条件。

<div class="birthday-privilege-entry">
  <img class="birthday-privilege-entry__texture" src="./assets/entry-texture.png" />
  <img class="birthday-privilege-entry__balloon" src="./assets/entry-balloon.png" />
  <img class="birthday-privilege-entry__icon" src="./assets/entry-icon.png" />
  <span class="birthday-privilege-entry__text">Claim your birthday gift</span>
</div>

.birthday-privilege-entry {
  position: fixed;
  bottom: 60px;
  inset-inline-end: 16px;
  width: 151px;
  height: 48px;
  overflow: hidden;
  border-start-start-radius: 100px;
  border-start-end-radius: 100px;
  border-end-start-radius: 100px;
  border-end-end-radius: 100px;
  background: linear-gradient(107.798deg, #3f2504 2.1369%, #8c550f 48.206%, #5d3a0b 100.21%);
  isolation: isolate;
}

.birthday-privilege-entry::after {
  position: absolute;
  inset: 0;
  z-index: 4;
  border: 0.5px solid #fff;
  border-start-start-radius: inherit;
  border-start-end-radius: inherit;
  border-end-start-radius: inherit;
  border-end-end-radius: inherit;
  box-sizing: border-box;
  content: '';
  mix-blend-mode: soft-light;
  pointer-events: none;
}

.birthday-privilege-entry__texture {
  position: absolute;
  z-index: 1;
  top: -80.34px;
  inset-inline-start: -56.17px;
  width: 167.6px;
  height: 152.25px;
  opacity: 0.4;
  mix-blend-mode: color-dodge;
}