Safari下CSS Transition首次hover不触发问题求助

我之前在做类似的hover背景切换效果时，也踩过Safari这个坑！你的问题根源在于Safari对未预加载图片的transition处理逻辑——首次hover时，浏览器还没完成hover状态背景图的加载和渲染，直接跳过了过渡动画，等图片缓存后（后续hover），过渡就正常了。

针对这个问题，有两个靠谱的解决思路：

方案1：预加载hover状态的背景图 #

通过CSS隐藏元素提前加载hover所需的背景图，让页面初始化时就把图片缓存下来，这样首次hover时浏览器能直接调用缓存的图片，触发过渡效果。

只需在现有CSS中添加一段代码：

.colBox::after {
  content: "";
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
  background-image: url("http://www.scatterboxshop.ie/wp-content/uploads/2019/11/Scatterbox-Shop-CTA-Cushions-BG.jpg");
}

这个伪元素不会在页面上显示，但浏览器会加载它的背景图，实现预加载的效果。

方案2：改用opacity过渡实现背景图切换（更稳定的跨浏览器方案） #

直接切换background-image的方式在Safari中本身就存在兼容性隐患，更稳妥的做法是把两张背景图放在两个重叠的容器里，通过切换opacity属性来实现平滑过渡——这种方式在所有现代浏览器（包括Safari）都能稳定工作。

修改后的HTML结构： #

<div class="colBox">
  <!-- 初始背景图容器 -->
  <div class="colBox-bg colBox-bg--initial"></div>
  <!-- hover背景图容器 -->
  <div class="colBox-bg colBox-bg--hover"></div>
  <a href="#">
    <div class="colCon">
      <h2 class="colHead">CUSHION COLLECTION</h2>
      <div class="hover-div">
        <div class="stuff">
          <p class="colHeadLg">Cushions</p>
          <p class="colP">Our luxury feather filled cushions are statement pieces each with a story to tell</p>
        </div>
        <div class="stuff-hidden">
          <p class="moreArrow">More <span><i class="fas fa-arrow-right"></i></span></p>
        </div>
      </div>
    </div>
  </a>
</div>

对应的CSS修改： #

.colBox {
  width: 100%;
  max-width: 300px;
  min-height: 400px;
  position: relative; /* 让背景容器可以绝对定位 */
  right: 0px;
}

/* 背景图容器通用样式 */
.colBox-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transition: opacity .5s ease-in-out;
  -webkit-transition: opacity .5s ease-in-out;
}

.colBox-bg--initial {
  background-image: url("http://www.scatterboxshop.ie/wp-content/uploads/2019/11/Scatterbox-Shop-CTA-Cushions.jpg");
  z-index: 1;
}

.colBox-bg--hover {
  background-image: url("http://www.scatterboxshop.ie/wp-content/uploads/2019/11/Scatterbox-Shop-CTA-Cushions-BG.jpg");
  opacity: 0;
  z-index: 2;
}

/* hover时切换透明度实现背景过渡 */
.colBox:hover .colBox-bg--initial {
  opacity: 0;
}
.colBox:hover .colBox-bg--hover {
  opacity: 1;
}

/* 确保内容层级高于背景图，避免被覆盖 */
.colCon {
  position: relative;
  z-index: 3;
  padding-top: 50px;
  padding-left: 35px;
  max-width: 200px;
  color: white !important;
  font-family: 'Montserrat', sans-serif;
}

/* 以下保留你原有CSS的其他样式 */
.colHead { color: white !important; font-weight: 400 !important; font-size: 12px !important; }
.colHeadLg { font-size: 40px; font-weight: 700; padding-top: 50px; }
.colP { font-size: 12px; line-height: 16px; }
.moreArrow { font-size: 20px; }
.hover-div { width: 200px; margin-top: 70px; }
.hover-div .stuff { margin-top: 0; position: relative; width: 100%; z-index: 2; -webkit-transition: margin-top 0.5s; transition: margin-top 0.5s; }
.hover-div .stuff-hidden { height: 0; width: 100%; overflow: hidden; -webkit-transition: height 0.5s; transition: height 0.5s; }
.hover-div:hover .stuff { margin-top: -40px; }
.hover-div:hover .stuff-hidden { height: 40px; }

这种方法通过控制两个重叠背景容器的透明度来实现平滑切换，完全避开了Safari对background-image过渡的兼容性问题，效果更稳定可靠。

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