根本原因是transform: scale()默认以左上角为原点缩放，导致溢出挤占空间；应设overflow: hidden、transform-origin: center，并用容器div包裹img而非直接缩放img。

hover时图片突然跳动或布局塌陷

根本原因是 transform: scale() 默认以元素左上角为原点缩放，放大后会挤占相邻格子空间，尤其在 display: grid 中没设好 overflow 或 transform-origin 时更明显。

• 给图片容器加 overflow: hidden，防止放大溢出破坏网格流
• 显式设置 transform-origin: center，让缩放围绕中心点，视觉更自然
• 避免直接对 <img> 标签用 scale，优先套一层 <div class="card"> 做容器，样式更可控 <h3>CSS Grid + transform scale 的兼容性陷阱</h3> <p>老版本 Safari（transform 在 <code>grid 子项上的复合动画支持不稳定，常表现为 hover 后无法恢复原状或卡顿。
  

  CSS婚礼策划服务机构宣传网站模板

  CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

  下载
  • 必须加 will-change: transform 到 hover 触发的元素上，提前告知浏览器要动画化
  • 慎用 scale(1.05) 这类小数值——某些引擎会因亚像素渲染导致模糊或闪烁，建议用 scale(1.1) 或以上
  • 若需支持 IE，transform 要补 -ms-transform，但 IE 不支持 Grid，实际得降级为 Flex 布局

  如何让放大不触发重排（reflow）

  只要用了 transform 和 opacity，浏览器就会走合成层（compositor），但前提是别“不小心”触发 layout。

  • 确保图片容器没有设置 width/height 依赖内容（如 auto），最好固定尺寸或用 aspect-ratio
  • 不要在 hover 状态里改 margin、padding、top 这类会触发布局的属性
  • 示例安全写法：

    .grid-item:hover img { transform: scale(1.2); transform-origin: center; }

  放大本身很简单，难的是让几十张图在各种屏幕、各种缩放比例下 hover 都不抖、不闪、不重绘。最常被忽略的是容器的 overflow 和 transform-origin 配合，还有那个看似无害的 will-change —— 没它，Safari 上 hover 可能只生效一次。