Firefox Quantum中含perspective的transform过渡异常问题求助

我之前在开发中也碰到过Firefox里transform结合perspective时的过渡异常问题，给你几个经过实践验证的技术建议：

• 分离perspective属性到父元素
  不要把perspective写在元素自身的transform复合属性里，而是将它作为独立属性添加到父容器上。比如：

  /* 父元素 */
  .parent {
    perspective: 1000px;
  }
  /* 目标元素 */
  .target {
    transform: rotateY(30deg);
    transition: transform 0.3s ease;
  }
  

  这样Firefox会把perspective作为固定的空间属性来处理，避免和transform的过渡动画产生计算冲突。

• 明确指定过渡的属性
  有时候Firefox对复合transform属性的过渡解析不够精准，建议明确指定只过渡transform属性，避免不必要的属性干扰：

  .target {
    transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
  }
  

  如果是特定的transform变换（比如仅rotateY），也可以尝试指定更具体的过渡属性（不过兼容性稍弱）：

  .target {
    transition: rotateY 0.4s ease;
  }
  

• 触发硬件加速优化渲染
  给目标元素添加硬件加速相关属性，强制Firefox使用GPU渲染过渡动画，能解决不少渲染层面的异常：

  .target {
    backface-visibility: hidden;
    /* 或者 */
    will-change: transform;
  }
  

  注意will-change不要滥用，仅在需要过渡的元素上添加即可。

• 排查冲突的CSS属性
  检查目标元素或其父元素是否存在overflow: hidden、position: fixed、filter这类可能和perspective叠加产生冲突的属性，暂时移除这些属性测试，逐步定位问题根源。

另外还要注意：尽量避免在过渡过程中动态修改perspective的值，Firefox对动态变化的perspective处理兼容性较差，保持perspective的固定值能减少异常概率。

内容的提问来源于stack exchange，提问作者Morteza Faghih Shojaie