Safari浏览器中内容溢出时CSS transform属性导致内容模糊问题

问题表现 #

在Safari浏览器中对父元素应用CSS transform变换时，如果内部子元素内容溢出且设置了滚动属性，子元素内的文本、内容会出现明显的显示模糊问题。

问题原因 #

这是Safari特有的光栅化渲染bug：父元素应用transform（尤其是缩放类变换）后，内部可滚动的子元素会被浏览器默认按缩放前的分辨率进行光栅化处理，放大后自然会出现模糊、发虚的情况。

可用解决方案 #

• 方案1：给可滚动的子元素添加GPU加速触发属性，强制单独创建合成层
  给滚动元素添加transform: translateZ(0)或者-webkit-transform: translateZ(0)，强制Safari为滚动元素单独分配渲染层，按缩放后的正确分辨率渲染内容。
  示例修改代码：

  .inner {
    height: 290px;
    overflow: auto;
    /* 新增以下代码 */
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }
  

• 方案2：添加will-change提示浏览器预分配渲染资源
  如果方案1无效，可以给父元素或者可滚动子元素添加will-change: transform，提前告知浏览器该元素会发生变换操作，提前预留更高的渲染资源，避免光栅化分辨率不足。
  示例修改代码：

  .outer {
    transform: scale(2.5) translate(50%, 50%);
    /* 新增以下代码 */
    will-change: transform;
  }
  

• 方案3：调整变换逻辑，滚动容器不参与缩放
  从根源避免问题的方案是不对包含滚动子元素的父容器直接应用transform缩放，改为将缩放变换应用到滚动容器内部的内容层上，滚动容器本身保持原尺寸，不会触发该bug。

内容的提问来源于stack exchange，提问作者mustafa.0x