如何避免CSS transition触发布局偏移-css教程-PHP中文网

只用transform和opacity就能避开90%的layout shift——因二者走合成层不触发布局计算，而left/top/width等属性直接修改盒模型，强制浏览器每帧重排布局树，引发视觉抖动与卡顿。

如何避免css transition触发布局偏移

只用 transform 和 opacity 就能避开 90% 的 layout shift —— 其他属性改了就重排，浏览器没得选。

为什么 left/top/width 一动就抖？

这些属性直接修改盒模型，每次变化都触发 reflow：浏览器要重新计算所有元素位置、尺寸、换行、折行……连隔壁的段落都可能被推着跳一下。哪怕只动 1px，只要涉及布局树重算，帧率就容易掉到 30fps 以下。

left: 0 → 100px 不仅移自己，还可能撑大父容器、挤走兄弟元素
width: 0 → 200px + display: block 的伪元素（如下划线）会参与文档流，宽度变 = 布局重算
margin-top: 0 → 10px 看似轻量，但照样推高后续所有内容

哪些属性真正安全？

只有走合成层（Compositor）的属性不触发布局计算，GPU 直接画，不碰 Layout Tree。

使用HTML,CSS,JavaScript开发Android应用程序英文文字pdf版附源文件

如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更

下载

✅ 安全属性：transform（含 translateX、scale、rotate）、opacity
❌ 危险属性：left、top、width、height、margin、padding、font-size（间接影响盒尺寸）
⚠️ 伪类/伪元素也要小心：::after 若设 display: block 或 float，它就在文档流里——width 变照样重排

怎么写才不踩坑？

不是加了 transition 就万事大吉，关键在“初始状态”和“变更方式”是否干净。

把位移动画全迁到 transform: translateX(0)，别用 left；缩放用 transform: scale(1)，别调 width
初始 transform 值必须显式写出，比如 transform: translateX(0)，否则第一帧可能跳变
动画元素的父容器得预设尺寸（width/height 或 min-height），否则子元素 transform 位移时，父容器可能因溢出或 overflow: visible 被带偏
慎用 will-change: transform —— 只在长列表滚动中持续运动的卡片这类真需要提前告知浏览器的场景才加，滥用会吃内存

缩放/旋转后位置不对？

这不是浏览器 bug，是 transform-origin 默认基准点不一致，尤其 Safari 对小数像素更严格。

transform: scale(0.8) 默认以中心缩放，文字会偏；加 transform-origin: left center 才对齐左边缘
Safari 里 translate(0.5px, 0) 常被截成 (0, 0)，改用整数位移 + scale() 或 opacity 配合
父级若有 transform（哪怕只是 translateZ(0)），就会创建新包含块，导致子元素 position: absolute 定位基准偏移 —— 查 DevTools 的 Computed 面板，别信“我没写”