JavaScript prepend()方法在Firefox中不生效元素不可见如何解决

问题表现 #

• 练习JavaScript DOM操作时编写了与课程示例完全一致的代码，预期效果为创建HTML元素并添加到DOM中正常渲染显示
• 实际运行时，元素确实被插入DOM树，在开发者工具中可查看到对应节点，但节点呈灰色显示，表现与设置display: none样式一致，页面中完全不可见
• 浏览器兼容性测试结果：相同代码在Chrome浏览器中运行完全正常，在Firefox浏览器中出现上述异常；已查阅MDN文档确认Element.prepend()方法已被当前使用的Firefox版本完全支持

相关代码 #

JavaScript逻辑代码 #

const header = document.querySelector('.header');
const message = document.createElement('div');
message.classList.add('cookie-message');
message.innerHTML =
  'We use cookies for improved functionality and analytics. <button class="btn btn--close-cookie">Got it!</button>';
header.prepend(message);

CSS样式代码 #

.header {
  padding: 3em;
  height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.cookie-message {
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  width: 100%;
  background-color: white;
  color: #bbb;
  font-size: 1.5rem;
  font-weight: 400;
}

HTML基础结构代码 #

<!DOCTYPE html>
<html lang="en">
  <head>
  </head>
  <body>
    <header class="header">
    
    </header>
   </body>
   </html>

待确认问题 #

• 该显示异常的根本原因是什么？
• 代码是否存在写法错误，或是遗漏了相关环境配置？

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