Safari与Chrome下Pac-Man网页游戏渲染差异问题求助

问题说明 #

基于HTML/CSS/JS开发的开源Pac-Man项目二次开发时，出现以下兼容性问题：

• Chrome浏览器渲染完全正常；
• Safari浏览器在大屏状态下显示正常，但触发小屏媒体查询（max-width:600px或max-height:700px）时，精灵图（角色、点数等）解析与显示异常，表现为位置错乱、元素显示错误。

核心相关代码 #

/* 大屏精灵图基础样式 */
.live {
  width: 3.2rem;
  height: 2.6rem;
  background-image: url("sprites.png");
  background-position: -26rem -3.2rem;
}

/* 小屏切换精灵图 */
@media (max-width: 600px), (max-height: 700px) {
  .live {
    background-image: url(sprites_small.png);
  }
}

.wall {
  background-image: url("map.png");
  z-index: 1;
}

@media (max-width: 600px), (max-height: 700px) {
  .wall {
    background-image: url("small_map.png");
  }
}

.blank {
  background-color: black;
}

.wall > * {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  background-color: black;
  display: block;
  position: relative;
  width: 1.5rem;
  height: 1.5rem;
  border: .2rem solid #161693;
  border-radius: 80%;
  z-index: 1;
}

@media (max-width: 600px), (max-height: 700px) {
  .points::after,
  .yellow-visible,
  .red-visible,
  .pink-visible,
  .blue-visible,
  .orange-visible {
    background-image: url("sprites_small.png");
  }
}

.yellow-visible {
  background-position: var(--yellow-sprite-x) var(--yellow-sprite-y);
  -webkit-transition: -webkit-transform var(--yellow-animation-length) linear;
  transition: -webkit-transform var(--yellow-animation-length) linear;
  transition: transform var(--yellow-animation-length) linear;
  transition: transform var(--yellow-animation-length) linear, -webkit-transform var(--yellow-animation-length) linear;
  z-index: 100;
}

可能的原因及修复方案 #

1. CSS变量与媒体查询的兼容性问题 #

Safari在媒体查询切换时，可能未正确更新background-position依赖的CSS变量（如--yellow-sprite-x），导致定位错乱。

• 修复：在小屏媒体查询中，针对每个精灵元素显式指定对应小屏精灵图的背景位置，而非依赖全局变量：

@media (max-width: 600px), (max-height: 700px) {
  .yellow-visible {
    background-image: url("sprites_small.png");
    /* 替换为小屏精灵图中黄色角色的实际像素坐标 */
    background-position: -XXpx -XXpx;
  }
  /* 同理给red-visible、pink-visible等元素添加对应小屏位置 */
}

2. Safari背景图切换的缓存与渲染问题 #

Safari切换媒体查询背景图时，可能未清除旧图缓存，导致新图的位置计算错误。

• 修复：为小屏模式下的精灵元素添加明确的background-size和background-repeat属性，强制Safari重新计算渲染：

@media (max-width: 600px), (max-height: 700px) {
  .points::after,
  .yellow-visible,
  .red-visible,
  .pink-visible,
  .blue-visible,
  .orange-visible {
    background-image: url("sprites_small.png");
    background-size: cover; /* 或根据精灵图尺寸设置具体像素值 */
    background-repeat: no-repeat;
  }
}

3. rem单位的计算差异 #

Safari在小屏模式下对rem单位的计算逻辑可能与Chrome存在差异，导致背景位置偏移。

• 修复：将小屏模式下的background-position单位替换为px（精灵图为固定像素尺寸，px定位更精准）：

@media (max-width: 600px), (max-height: 700px) {
  .live {
    background-image: url(sprites_small.png);
    /* 替换为小屏精灵图中live元素的实际像素坐标 */
    background-position: -XXXpx -XXXpx;
  }
}

4. 过渡属性的冗余前缀冲突 #

代码中过渡属性的多前缀写法可能导致Safari解析异常，影响元素变换时的背景位置。

• 修复：简化过渡属性，保留标准写法与必要的WebKit前缀：

.yellow-visible {
  background-position: var(--yellow-sprite-x) var(--yellow-sprite-y);
  transition: transform var(--yellow-animation-length) linear;
  -webkit-transition: transform var(--yellow-animation-length) linear;
  z-index: 100;
}

验证步骤 #

1. 临时注释小屏媒体查询的背景图切换逻辑，强制使用小屏精灵图，排查是否为精灵图本身的尺寸或格式问题；
2. 打开Safari开发者工具，查看小屏模式下元素的background-image和background-position实际计算值，确认是否与预期一致；
3. 逐步禁用过渡、CSS变量等特性，定位具体触发异常的代码模块。

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