Safari浏览器中iframe:hover触发transform动画时内容1像素偏移问题

这是Safari WebKit引擎处理跨iframe渲染层动画时的典型子像素计算bug，核心原因是动画执行过程中跨文档渲染树重绘时，像素舍入计算出现误差，仅在动画执行过程中出现，布局稳定后自动消失。可通过以下方案修复：

• 给当前页面中触发transform动画的iframe元素添加强制硬件加速属性，让iframe渲染层独立，避免和父页面渲染合并时出现计算误差：

.iframe-selector {
  -webkit-transform: translateZ(0);
  will-change: transform;
}

• 如果上述方案未生效，可给iframe添加1px透明边框规避边缘舍入误差，搭配box-sizing避免影响原有布局：

.iframe-selector {
  border: 1px solid transparent;
  box-sizing: border-box;
}

• 条件允许的情况下，可给iframe内嵌页面的根元素也添加硬件加速属性，同步两端渲染策略：

/* 内嵌页面CSS */
html, body {
  -webkit-transform: translateZ(0);
}

内容的提问来源于stack exchange，提问作者Oxidized