寻求Safari浏览器背景图片过渡失效问题的解决方案

问题概述 #

Safari浏览器中切换背景图片时无法实现淡入淡出过渡效果，会出现空白白屏，但Edge、Chrome可正常显示。当前使用的代码如下：

html { 
  background: url(https://www.cw109eu.uk/cover1.webp) no-repeat center center fixed; 
  background-size: cover;
  -webkit-transition: background 2000ms ease-in-out 2000ms;
  -moz-transition: background 2000ms ease-in-out 2000ms;
  -o-transition: background 2000ms ease-in-out 2000ms;
  transition: background 2000ms ease-in-out 2000ms;
}

修复方案 #

Safari对background复合属性的过渡支持存在兼容性局限，无法平滑处理背景图片切换的过渡动画。推荐使用以下两种方法解决：

方法1：伪元素叠加+透明度过渡（推荐） #

通过伪元素承载背景图片，利用透明度过渡实现淡入淡出，同时预加载图片避免白屏：

html {
  position: relative;
  min-height: 100vh;
}

html::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url(https://www.cw109eu.uk/cover1.webp) no-repeat center center;
  background-size: cover;
  opacity: 1;
  transition: opacity 2000ms ease-in-out 2000ms;
  z-index: -1;
}

/* 切换图片时通过JS添加此类 */
html.bg-switch::before {
  background-image: url(https://www.cw109eu.uk/cover2.webp);
  opacity: 0;
}

添加图片预加载代码，确保切换时图片已加载完成：

// 预加载需要切换的背景图片
['cover1.webp', 'cover2.webp'].forEach(src => {
  const img = new Image();
  img.src = `https://www.cw109eu.uk/${src}`;
});

方法2：拆分过渡属性（有限场景适用） #

尝试拆分background属性的过渡规则，单独指定background-image和相关属性，但此方法在Safari中稳定性较差，仅适用于简单场景：

html {
  background: url(https://www.cw109eu.uk/cover1.webp) no-repeat center center fixed; 
  background-size: cover;
  -webkit-transition: background-image 2000ms ease-in-out 2000ms, opacity 2000ms ease-in-out 2000ms;
  transition: background-image 2000ms ease-in-out 2000ms, opacity 2000ms ease-in-out 2000ms;
}

原理说明 #

Safari在处理background复合属性过渡时，无法衔接新旧背景图片的渲染流程，导致过渡期间出现空白。伪元素叠加的方式通过透明度过渡实现视觉上的淡入淡出，预加载图片则避免了切换时因图片未加载完成导致的白屏。

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