移动端网页遮罩图垂直方向拉伸变形排查与 -webkit-mask-repeat-y 属性关系
当移动端网页使用遮罩图时，如果垂直方向出现拉伸变形，应优先检查 -webkit-mask-repeat-y 属性的 round 值设置。
检查遮罩图垂直重复方式
移动端网页遮罩图垂直方向出现拉伸变形，通常是因为设置了 round 值。round 值会让重复的图像在垂直空间增加时拉伸，直到能容纳下一个图像，随后所有图像会压缩以腾出空间。这种动态调整会导致图像高度发生变化，从而产生视觉上的拉伸或压缩效果。
排查时需确认 CSS 中 -webkit-mask-repeat-y 的具体取值。如果使用了 repeat、space 或 no-repeat，图像通常保持原始尺寸或按规则分布，不会发生拉伸。只有 round 值会触发图像高度的动态调整，导致变形。检查代码中是否误用了 round 或在多张遮罩图时未正确匹配重复样式。
验证图像原始尺寸与重复数量
图像的原始高度与重复次数直接影响 round 值的拉伸效果。例如，原始高度为 260px 的图像重复三次时，可能会拉伸至 300px 高，直到能容纳第四张图像，随后所有图像压缩至 225px 高。这种变化源于 round 值的机制，即通过拉伸或压缩来适应垂直空间。
验证步骤包括：查看遮罩图的原始尺寸，计算当前垂直空间内能容纳的图像数量，并对比 CSS 中的重复样式。如果原始尺寸与重复数量导致空间不足，round 值会强制调整图像高度。通过调整重复数量或改用 repeat 等其他值，可以避免拉伸变形。
使用 no-repeat 或 space 替代 round
如果不需要图像重复，可以使用 no-repeat 值，此时仅绘制一张遮罩图，垂直方向不会出现拉伸。如果需要重复但避免拉伸，space 值是更合适的选择。space 值会尽可能重复图像而不裁剪，并在图像间均匀分布空白，不会改变图像的原始尺寸。
操作建议：将 -webkit-mask-repeat-y 从 round 改为 no-repeat 或 space。no-repeat 适用于单张遮罩图，space 适用于多张遮罩图且希望保持原始尺寸的场景。修改后需在移动端浏览器中刷新页面，观察遮罩图是否恢复正常显示。
检查多张遮罩图的样式匹配
当使用多张遮罩图时，每张图像的重复样式需通过逗号分隔并按顺序匹配。例如，css.example-three 中定义了两张遮罩图，分别应用 repeat 和 space 样式。如果未正确匹配样式，可能导致部分图像拉伸或压缩异常。
验证方法：检查 CSS 中 -webkit-mask-image 与 -webkit-mask-repeat-y 的逗号分隔列表是否一一对应。确保每张图像的重复样式符合预期，避免因样式错位导致部分图像使用 round 值引发拉伸。修改后重新加载页面，确认所有遮罩图显示正常。
资料与延伸阅读
你可以通过以下原始资料核对文中概念，并继续深入阅读。