Safari不显示带事件监听器的元素及控制台冻结问题求助

问题概述 #

页面中的data-vimeo元素在window.onload后被替换为包含权限提示的占位结构，但在Safari中出现两个异常：

• 带cookie-consent类的按钮元素无法显示
• 控制台调试时点击该元素会触发冻结

替换后的结构代码：

<div class="vimeo-placeholder">
  <div class="placeholder-headline">Vimeo视频已隐藏</div>
  <div>您需先同意权限才可加载此视频</div>
  <div class="cookie-consent">点击此处同意权限</div>
</div>

关联CSS代码：

.vimeo-placeholder {
  background-color: rgba(0, 0, 0, .03);
  height: 6rem;
  text-align: center;
  display: flex;
  padding: 5rem;
  align-items: center;
  justify-content: center;
  border-radius: 1.5rem;
  margin: 1rem;
}

.vimeo-placeholder .placeholder-headline {
  font-weight: bold;
  font-size: 1.2rem;
  margin-bottom: 1.2rem;
}

.vimeo-placeholder .cookie-consent {
  margin-top: 0.5rem;
  text-decoration: underline;
  cursor: pointer;
}

排查方向 #

1. Flex布局方向错误导致元素溢出 #

父容器.vimeo-placeholder使用display: flex但未指定flex-direction: column，默认会以横向（row）排列子元素。三个子元素横向排列时会超出容器宽度，Safari会直接隐藏溢出部分，而其他浏览器可能自动适配布局。

修复尝试：给.vimeo-placeholder添加垂直排列属性：

.vimeo-placeholder {
  /* 保留原有属性 */
  flex-direction: column;
}

2. 容器高度与padding的冲突（box-sizing问题） #

当前.vimeo-placeholder的height: 6rem仅为内容高度，加上上下padding: 5rem后，总高度会达到16rem。若父元素有高度限制，或容器内元素总高度超出，Safari会直接截断内容。

修复尝试：让padding计入容器总高度：

.vimeo-placeholder {
  /* 保留原有属性 */
  box-sizing: border-box;
}

3. 点击事件监听器的兼容性/性能问题 #

该元素唯一区别是绑定了click事件，控制台冻结大概率是事件处理函数存在问题：

• 检查事件处理中是否使用了Safari不支持的API（如未转译的ES6+特性、document.cookie的特殊写法）
• 排查是否存在无限循环、大量DOM操作或内存泄漏（比如反复绑定事件、无终止条件的递归调用）
• 暂时移除事件监听器，测试元素是否显示、控制台是否还冻结，确认是否是事件代码导致的问题

4. Safari CSS属性兼容性检查 #

• 在Safari开发者工具的「Computed」面板查看.cookie-consent的display、visibility、opacity、overflow等属性，确认是否被其他样式意外覆盖
• 尝试给.cookie-consent添加cursor: pointer !important，排除指针样式兼容性问题

5. 控制台冻结的额外排查 #

如果移除事件后控制台仍冻结：

• 检查该元素是否存在大量嵌套DOM或复杂样式，导致Safari渲染引擎崩溃
• 禁用所有浏览器扩展后重新测试，排除扩展干扰

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