旧版safari（≤15.6）中transform-origin失效主因是其gpu渲染路径跳过抗锯齿兜底，50% 50%在奇数宽高元素上算出99.5px等亚像素坐标致模糊；svg元素根本不响应该css属性，须改用原生transform="rotate(45 100 100)"或包裹模拟。
旧版 Safari（≤15.6）中 transform-origin 渲染异常，不是写法错了，而是它对非整数坐标、百分比计算和 SVG 元素的处理逻辑与现代浏览器根本不同——必须用整数像素、禁用 translateZ、绕开 SVG 的 CSS 原点控制。
为什么 transform-origin: 50% 50% 在 Safari 里经常失效
旧版 Safari 把百分比值转成物理像素时不做四舍五入，比如一个宽高为 199px 的元素，50% 50% 算出来是 99.5px 99.5px，触发亚像素渲染 → 文字/边框直接模糊或抖动。这不是 bug，是它的 GPU 渲染管线跳过了抗锯齿兜底。
- 只在 Safari ≤15.6（尤其 iOS 15 及更早）中高频出现；Chrome/Firefox 同样有亚像素问题，但降级策略更温和
-
transform-origin: center在 Safari ≤13.1 中会被忽略，必须写双值：50% 50%或100px 100px - 如果父容器用了
transform（如居中用的translate(-50%, -50%)），Safari 会把子元素的transform-origin相对这个已变形的坐标系再算一次，结果完全不可控
怎么写 transform-origin 才真能在 Safari 旧版生效
核心原则：让原点落在整数物理像素上，且不依赖动态计算或百分比推导。
Plan Dubai Travel — Flights, Hotels, Burj Khalifa, Desert Safari, Malls & Itineraries
下载
规划您的迪拜之旅 — 哈利法塔观景、沙漠探险、迪拜购物中心购物、棕榈岛度假村及黄金市场砍价。还提供支持...
- 优先用绝对像素值：
transform-origin: 100px 100px，确保该坐标在目标元素内是整数（例如元素宽高为偶数、cx/cy是整数） - 若需响应式，JS 动态设置时必须四舍五入：
el.style.transformOrigin = Math.round(x) + 'px ' + Math.round(y) + 'px' - 避免混用单位：
left 20%或50% top语法错误（Y 轴关键字不能放前面），只用left top、20px 30px、50% 50%这类合法组合 - 加前缀保底：
-webkit-transform-origin: 50% 50%和transform-origin: 50% 50%并列声明，iOS Safari ≤15.6 必须靠前者
SVG 元素上 transform-origin 根本不生效怎么办
这不是兼容性问题，是规范行为：SVG 原生图形（<circle></circle>、<rect></rect>、<path></path>）**不响应 CSS 的 transform-origin**，默认永远绕 0 0（viewBox 左上角）变换。
- 别试
transform-box: fill-box—— Safari/Chrome/Firefox 全部忽略它在图形元素上的设置 - 改用 SVG 原生
transform属性：<circle transform="rotate(45 100 100)"></circle>，后两个参数就是绝对坐标，所有 SVG 1.1 浏览器都支持 - 或者包裹
<g></g>模拟原点：<g transform="translate(100,100)"><circle transform="rotate(45)"></circle></g> - 若必须用 CSS 控制，得把 SVG 嵌进
<div> 容器，再对 div 设 <code>transform-origin，但要注意overflow: hidden会裁剪旋转溢出部分哪些“修复技巧”会让 Safari 更糊
网上流传的很多“加速写法”，在旧版 Safari 里实际是模糊放大器。
-
transform: rotate(15deg) translateZ(0)：强制创建两个合成层，纹理叠加后插值误差翻倍，实测锐度下降约 40% -
will-change: transform：在 Safari 旧版中等于“立刻上传低质纹理”，不是预告，是命令，且无法自动清除，易导致内存泄漏 -
backface-visibility: hidden单独使用基本无效；只有配合错误使用的transform-style: preserve-3d时才可能加重模糊 - 给文字加
filter: blur(0)或-webkit-font-smoothing: subpixel-antialiased，仅当transform值本身为整数时才起效，否则毫无作用
最隐蔽的风险在于：你本地开发时看着清楚，是因为屏幕 DPR=2 或浏览器缓存了旧纹理；一换到 iOS 15 实机或 DPR=1 的 Windows 笔记本，糊得猝不及防。真正稳的方案，是放弃“GPU 加速幻觉”，让关键文字留在主渲染层，哪怕动画帧率低一点。
-
