hover时translateY浮起无效，主因是未启用硬件加速、被overflow/inline等样式压制或触发重排；阴影不同步需统一transition属性；移动端应避免依赖:hover；文字模糊优先用backface-visibility:hidden而非translateZ(0)。
hover 时用 translateY 浮起但没效果？检查是否触发了重排
直接写 transform: translateY(-4px); 却没浮起来，大概率是元素没启用硬件加速或被其他样式压制。CSS transform 本身不触发重排，但若父容器有 overflow: hidden、will-change: auto 或正在做动画的兄弟元素占位异常，就可能让浮起“卡住”。
- 确保目标元素没有
display: inline（改用inline-block或block） - 加
will-change: transform;到 hover 前的状态里，提前提示浏览器准备图层 - 避免在
:hover中同时改margin或top—— 这会强制重排，抵消translateY的轻量优势
阴影变深 + 浮起不同步？别把 box-shadow 和 transform 写在不同过渡属性里
常见错误是这样写：transition: transform 0.2s, box-shadow 0.2s; 看似一样快，但阴影渲染延迟比 transform 高，尤其在低端设备上容易看出“先浮后影”或“影子跳一下”。
- 统一用
transition: all 0.2s ease;（仅限简单组件，避免意外过渡） - 更稳妥的做法：只过渡
transform和box-shadow两项，显式列出：transition: transform 0.2s ease, box-shadow 0.2s ease; - 阴影值推荐从
0 2px 4px rgba(0,0,0,0.1)过渡到0 6px 12px rgba(0,0,0,0.18)，数值翻倍但透明度别拉太高，否则像盖了层灰膜
移动端 hover 失效？别依赖 :hover 做核心交互
真机上 touch 设备没有持续 hover 状态，:hover 只在 Safari 桌面版或 Android Chrome 的“模拟悬停”下临时生效，不能当交互主逻辑。
- 需要浮起反馈的按钮，必须搭配
:active（按下的瞬间）和 JS 的touchstart/touchend补全 - 若用
@media (hover: hover)做条件判断，注意它在 iOS Safari 15.4+ 才稳定支持，旧版本会直接 fallback 到无 hover 分支 - 纯 CSS 方案下，可加一层
.is-hoveredclass 由 JS 控制，比赌:hover可靠
浮起后文字模糊？translateZ(0) 或 backface-visibility: hidden 不是万能解
加了 transform: translateY(-4px) translateZ(0); 后字体发虚，说明强制 GPU 加速反而让 subpixel 渲染失效了 —— 尤其在非 retina 屏或 Windows 的 ClearType 下更明显。
立即学习“前端免费学习笔记（深入）”；
- 优先试
backface-visibility: hidden;，它开图层成本更低，且对文本渲染干扰小 - 如果必须用
translateZ(0)，记得同步加font-smoothing: antialiased;（WebKit）和-webkit-font-smoothing: antialiased; - 真正要解决模糊，得看是否用了小字号（≤14px）+ 非整数缩放（如 110%），这时浮起只是暴露了底层渲染问题
最麻烦的其实是多层嵌套下 transform 的层叠上下文冲突 —— 比如父容器有 transform: scale(0.95)，子元素再 translateY 就会按缩放后坐标系计算，浮起距离不对。这种没法靠查文档解决，得打开 DevTools 的 Layers 面板一层层点开看。
