为什么Safari浏览器中CSS hover状态无法正常触发？

问题原因 #

这是CSS选择器解析规则和Safari兼容性共同导致的问题：
CSS规范明确要求：如果逗号分隔的选择器列表中存在任意一个浏览器无法识别的伪类/选择器，整个规则块都会被浏览器直接丢弃。
你的代码中触发hover样式的规则写为：

.wistia:hover button.embed-youtube__play,
.wistia button.embed-youtube__play:focus-visible {
  background: url("https://nextiva.com/assets/svg/play-button.svg") no-repeat center center, #005fec;
  background-size: 40%;
  background-position: 55%;
}

15.4版本以下的Safari并不原生支持:focus-visible伪类，即便你引入了JS polyfill，也只能实现focus-visible的交互逻辑，无法让浏览器识别原生的:focus-visibleCSS选择器，因此Safari会直接丢弃整个规则块，连带:hover的样式也无法生效。而Chrome原生支持:focus-visible，所以规则可以正常生效。

修复方案 #

把两个选择器拆分为独立的CSS规则块即可，避免相互影响：

/* 单独写hover规则，不受focus-visible兼容性影响 */
.wistia:hover button.embed-youtube__play {
  background: url("https://nextiva.com/assets/svg/play-button.svg") no-repeat center center, #005fec;
  background-size: 40%;
  background-position: 55%;
}
/* 单独写focus-visible规则，低版本Safari不识别只会丢弃这一块，不影响其他样式 */
.wistia button.embed-youtube__play:focus-visible {
  background: url("https://nextiva.com/assets/svg/play-button.svg") no-repeat center center, #005fec;
  background-size: 40%;
  background-position: 55%;
}

如果还存在偶发的hover不触发问题，可以给.wistia加上transform: translateZ(0);触发GPU渲染，避免Safari层叠上下文识别异常，同时统一transition的前缀写法：

.wistia {
  position: relative;
  display: block;
  padding: 0;
  overflow: hidden;
  cursor: pointer;
  width: 800px;
  height: 600px;
  margin-top: 50px;
  border: 1px solid red;
  /* 新增：触发GPU渲染 */
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
}
.wistia button.embed-youtube__play {
  background: url("https://nextiva.com/assets/svg/play-button.svg") no-repeat center center, rgba(33, 33, 33, 0.8);
  background-size: 40%;
  background-position: 55%;
  border: 0;
  border-radius: 50%;
  position: absolute;
  /* 修改：统一transition前缀 */
  -webkit-transition: all 0.2s ease;
  transition: all 0.2s ease;
  width: 10%;
  height: 13%;
  cursor: pointer;
  z-index: 10;
  display: flex;
  justify-content: center;
  align-items: center;
  top: 50%;
  left: 50%;
  transform: translate3d(-50%, -50%, 0);
}

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