cwebp -q 82 -alpha_q 100 icon.png -o icon.webp identify -format '%[channels]\n' icon.png
PNG 图标转成 WebP 后,iOS 14 的 Safari 上透明区域显示成黑色方块,同一张图在 Chrome 和安卓上完全正常。先别急着动参数,把报错原文和时间点记下来,顺序反了容易白折腾。
原因不复杂,转换命令只指定了质量参数,没有保留 alpha 通道,或者用了不支持透明的编码方式。旧版 Safari 遇到这类 WebP,解码降级处理就是填黑底。
「WebP 透明通道」排查到最后往往是很小的一处差异,前面那些复杂猜测可以先放一放。改完隔一天再看一次,当场正常不代表能稳住。
测试环境和线上的差别,往往就在版本号和那几行被忽略的配置上。线上出问题先对时间点,跟发布、备份、任务执行的时刻排一排,能省掉一半功夫。
日志级别临时调高可以,记得改回去,长期开着既占磁盘又掩盖真问题。
处理上按这个顺序:先确认源图是带透明通道的 PNG,用 identify 看通道数;转码时显式保留 alpha,质量参数和透明分开设置;保留 PNG 作为回退,按 Accept 头分发,别对旧 Safari 只给 WebP。
改完只确认一件事:iOS 14 上图标透明区域露出页面背景,不再是黑块。
