ios 14 webp动图有坑

这是《每周杂记》的第16篇日常记录，欢迎留言、转发。

移动端，输入使用的是虚拟键盘，文本输入框酌情设置autocapitalize="off"、spellcheck="false" ，关闭首字母大写、拼写检查特性；指定safari专属的autocorrect="off" 非标准属性，关闭自动纠正属性。

ios 14 safari，webp格式图片动画支持不完美，CDN服务商gif图自动转换webp格式时，动图可能显示有问题。

https://developer.apple.com/forums/thread/663812

webp图片支持透明度，支持动画，图片体积相对jpg更小，主流浏览器都支持，是jpg/png/gif图的一种很好的替换格式。gif图体积较大时，一般也可考虑用循环播放的video视频替换。

非可聚焦元素，比如div，原先safari上直接监听click事件是无效的，一般通过加cursor: pointer来实现兼容。ios 14版本safari已无需额外处理了。

css变量，自定义属性，在FB中文站上看到在直接使用。caniuse上看到有95%支持率，未来不久移动端基本可以使用；如果浏览器支持css嵌套，一定程度上能放弃对sass等预编译语言的使用了。

textarea 文本内容自动撑高，使用grid布局实现

https://css-tricks.com/the-cleanest-trick-for-autogrowing-textareas/

记录一下项目中用到的这个经典抽奖概率算法，网上搜索就能找到相关实现。

/*let array = [子项是对应的中奖概率] // 100%中奖let sum = 数组数字相加得其和循环遍历数组，索引index, 当前遍历值value    let rand = 从0到总和sum间随机取一个数值    if(rand <= 当前循环索引) {        return 中奖，返回数组索引    }else {        sum -= value; //将总和减去当前遍历值    }*/