Firefox刷新时SVG显示异常（.hiddenOnLoad类失效）技术求助

我之前碰到过类似的Firefox渲染优先级相关的问题，给你几个实际可行的排查和解决方向：

• 提升隐藏样式的优先级与加载时机
  Firefox在页面初始渲染阶段，对外部CSS的加载解析时序可能和其他浏览器有差异，导致你的.hiddenOnLoad规则没来得及生效。可以试试：

  • 把隐藏样式放在<head>的内联<style>标签里，确保页面一开始就能读取到这个规则，而不是依赖外部CSS文件的加载
  • 给选择器增加特异性，比如结合SVG的父容器ID，或者临时用!important测试是否是样式覆盖问题：

    #svg-wrapper .hiddenOnLoad {
      display: none !important;
    }
    

• 替换display:none为更柔和的隐藏方式
  有时候Firefox会对初始状态的display:none元素有特殊的渲染处理，试试用visibility:hidden + opacity:0配合尺寸限制来替代，这样既隐藏元素，又能避免渲染跳转：

  .hiddenOnLoad {
    visibility: hidden;
    opacity: 0;
    max-height: 0;
    overflow: hidden;
    pointer-events: none; /* 防止交互 */
  }
  /* 淡入时切换的类 */
  .fade-in {
    visibility: visible;
    opacity: 1;
    max-height: 100vh; /* 根据实际内容调整 */
    pointer-events: auto;
    transition: opacity 0.3s ease, max-height 0.3s ease;
  }
  

• 限制SVG的初始尺寸
  检查你的SVG元素是否有明确的尺寸约束，比如设置max-width:100%、width:100%或者固定的宽高值，同时把它放在一个有明确尺寸的容器内。Firefox刷新时可能会先以SVG的默认 viewBox尺寸渲染，导致全屏溢出，提前约束尺寸就能避免这个问题。

• 用Firefox DevTools排查根源
  打开Firefox的开发者工具，做这两步排查：

  1. 在调试器里给你的淡入触发JS代码设置断点，刷新页面后查看元素的样式面板，确认.hiddenOnLoad是否真的被应用，有没有被其他样式规则覆盖
  2. 用性能面板录制页面刷新的全过程，查看CSS加载、DOM渲染和JS执行的时序，判断是不是样式加载晚于初始渲染导致的闪烁

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