Google Grid Gallery Safari模态框滚动失效问题求助

嘿，这个问题我之前做类似模态框组件时也踩过坑！Safari对overflow滚动的处理确实和Chrome、Firefox有差异，尤其是结合固定定位的模态框场景，大概率是CSS属性的兼容性问题导致的，给你几个针对性的解决方案：

• 添加Safari专属滚动触发属性
  给模态框的文本内容容器加上-webkit-overflow-scrolling: touch，这个属性是Safari启用平滑滚动的关键，同时确保容器明确设置了max-height和overflow-y: auto：

  .ggg-modal-content { /* 替换成你实际的内容容器类名 */
    max-height: 85vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    position: relative; /* 额外加相对定位强化层级 */
  }
  

• 检查父容器的溢出规则
  排查模态框的父级容器（比如背景遮罩层）是否设置了overflow: hidden，如果父级是position: fixed且隐藏了溢出，Safari可能会继承这个规则，导致子容器的滚动被抑制。可以把父级的overflow: hidden移除，或者确保内容容器的层级和定位不受父级影响。

• 避免transform与滚动的冲突
  如果你的模态框是用transform: translate(-50%, -50%)实现居中的，Safari有时候会把这个元素视为“不可滚动”的层级。可以尝试换成传统的居中方式：

  .ggg-modal {
    position: fixed;
    top: 50%;
    left: 50%;
    width: 90%;
    margin-top: -45vh; /* 高度的一半 */
    margin-left: -45%; /* 宽度的一半 */
  }
  

如果以上CSS调整都没解决问题，可以试试在模态框打开的JS逻辑里，手动触发一次内容容器的滚动事件，比如：

document.querySelector('.ggg-modal-content').scrollTop = 0;

这能强制Safari识别容器的滚动属性。

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