网页视觉优化：19年全栈工程师揭秘7个被忽视的关键细节

　　去年十月份，我在客户现场盯改版上线，凌晨一点半，CDN缓存清了第七遍，页面还是灰一块白一块——不是样式错乱，是视觉层叠顺序对不上，左上角那个带微光的悬浮按钮，明明 z-index 设了 9999，却总被底下滚动条盖住。

文章配图，仅供参考

　　这时候客户运营王姐发来消息：“按钮点不了，用户说像幽灵。”她没截图，就甩了句“幽灵”，后面跟个波浪号～

　　我调出滚动容器的 overflow 属性，overflow-y: scroll —— 没问题；改成 auto —— 还是压；把整个父容器加 transform: translateZ(0) 强制硬件加速……它浮上来了，但右侧横向滚动条又消失了一截，用户反馈“右边内容看不见”。我删掉 transform，它又沉下去。反复八次，每次 reload 都得等二十来分钟 CDN 缓存失效。

　　（我昨天在楼道碰见保洁阿姨，她问我：“你们敲键盘咋老按同一个键不换手？”我没答，她拖着桶走了）

　　第九次，我把鼠标移到那个按钮上，悬停态的 box-shadow 是 0 0 8px rgba(0,0,0,0.15)，我把它删了，只留 background 和 border，按钮瞬间浮出水面。我又加回去——压。减 opacity 到 0.99 —— 浮。设为 1 —— 压。我试了 opacity: 0.9999，浮；opacity: 1，压。不是四舍五入误差，是实打实的临界点。

　　我查 MDN，查 caniuse，查 WebKit Bugzilla，没人提这个组合：overflow: scroll + z-index: 9999 + opacity: 1 + box-shadow，三者并存时，某些 Blink 版本（具体哪个？我不知道）会触发合成层排序异常——不是不合成，是合成了，但排序树算错，把 shadow 所在的图层误判为“非交互层”，丢进底层栈里。但 opacity: 0.9999 又让它进了另一条合成路径……反正就是算岔了。

　　我问前端组长老李要不要上报 Chromium，他叼着牙签说：“报了三年了，他们标记为 ‘won’t fix’，说是 ‘as intended behavior for legacy compositing model’。”

　　（那天下雨，我包里有伞，但没拿出来）

　　最后上线用的方案是：按钮保留 box-shadow，但 opacity 写成 0.99999999；CSS 里加一行 / WTF / 注释；CDN 配置里锁死 Chrome 114–117 用户代理，对更高版本返回 JS 动态补丁——patch 中把 button.style.opacity = 0.99999999 强刷一遍。生效了。但你知道最烦的是什么吗？上周那个用了相同方案的金融后台项目，同一天上线，同样的按钮、同样的写法、同样的 patch 脚本，它没压——全站所有环境都正常，包括 IE11 的虚拟机里，它都浮着。

　　我现在看到 opacity: 1 就手抖。不是怕它不透明，是怕它太透明——透明得让浏览器自己都信了，信它该躺平。

　　有谁碰到过这个吗

（编辑：航空爱好网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!