Mac端Safari浏览器JavaScript全屏方法运行异常问题咨询

这个问题是Mac端Safari的WebKit内核全屏逻辑的默认特性导致的：当你调用单个DOM元素的webkitRequestFullscreen接口触发全屏时，Safari默认会保持该元素原有的宽高比居中展示，未被元素覆盖的屏幕区域会默认填充为黑色。当开发者控制台处于打开状态、或者页面存在导航栏时，视口尺寸发生变化，元素的全屏适配逻辑没有同步更新，就会出现黑边。

解决方案 #

• 新增全屏状态下的CSS适配规则
  给#container元素添加WebKit前缀的全屏伪类样式，强制元素在全屏状态下占满整个视口，同时设置和容器一致的背景色避免色差：

/* Safari兼容前缀 */
#container:-webkit-full-screen {
  width: 100vw;
  height: 100vh;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  background-color: #fff; /* 替换为你的容器实际背景色 */
}
/* 兼容标准全屏API，适配后续Safari版本 */
#container:fullscreen {
  width: 100vw;
  height: 100vh;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  background-color: #fff; /* 替换为你的容器实际背景色 */
}

• 优化全屏调用逻辑
  如果业务场景允许，直接请求页面根元素全屏，从根源避免单个元素全屏的适配问题：

var fullscreen = () => {
  const root = document.documentElement;
  // 兼容不同前缀的全屏API
  const requestFull = root.requestFullscreen || root.webkitRequestFullscreen;
  requestFull.call(root);
}

如果必须单独给#container元素触发全屏，可以在调用全屏接口后强制触发浏览器重排，让Safari重新计算元素尺寸：

var fullscreen = async () => {
  const container = document.getElementById('container');
  await container.webkitRequestFullscreen();
  // 强制重排逻辑
  container.style.display = 'none';
  void container.offsetHeight;
  container.style.display = 'block';
}

• 适配控制台/导航栏动态变化场景
  监听Safari的全屏变化事件，在视口尺寸变化时动态调整容器尺寸：

document.addEventListener('webkitfullscreenchange', () => {
  if (document.webkitFullscreenElement === document.getElementById('container')) {
    const container = document.getElementById('container');
    container.style.width = `${window.innerWidth}px`;
    container.style.height = `${window.innerHeight}px`;
  }
});

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