我之前也碰到过类似的Chrome扩展窗口渲染异常问题，结合你贴的代码和现象来看，大概率是浏览器窗口渲染时机与布局计算的冲突导致的，具体可能有这几个原因：

可能的原因 #

• 窗口位置计算的准确性问题：你直接用screen.width和screen.height计算窗口位置，但如果系统有多屏显示、屏幕缩放，或者浏览器还没完成屏幕尺寸的初始化，这个计算值可能会让窗口被定位到浏览器认为的“非可视区域”，触发了渲染优化（比如暂停渲染），拖动窗口时窗口进入有效可视区域，才触发了强制重绘。
• Popup类型窗口的特殊渲染策略：Chrome对type: "popup"的窗口有轻量级渲染限制，如果你的弹窗页面有异步资源加载、DOM操作延迟，浏览器可能会先显示空白窗口，但有时候触发重绘的信号没有正常发送，拖动窗口的用户操作刚好补上了这个触发动作。
• 窗口创建与DOM加载的时序不匹配：你的代码只负责创建窗口，没有等待弹窗页面的DOM加载完成，窗口已经显示但内容还没渲染，而Chrome的渲染引擎没有自动触发重绘，需要用户交互来激活。

对应的解决方案 #

1. 优化窗口位置计算逻辑 #

改用Chrome提供的系统API获取准确的屏幕工作区（排除任务栏、dock等占用区域），避免窗口被定位到无效区域：

chrome.system.display.getInfo((displays) => {
  // 找到主屏幕
  const primaryDisplay = displays.find(d => d.isPrimary);
  const { workArea } = primaryDisplay;
  const options = {
    type: "popup",
    url: "login_popup.html",
    width: 440,
    height: 490,
    // 基于主屏幕工作区计算居中位置
    left: (workArea.width / 2) - (440 / 2) + workArea.left,
    top: (workArea.height / 2) - (490 / 2) + workArea.top
  };
  chrome.windows.create(options);
});

2. 在弹窗页面强制触发重绘 #

在弹窗的login_popup.html中添加DOM加载完成后的重绘触发逻辑，确保内容正常渲染：

document.addEventListener('DOMContentLoaded', () => {
  // 通过临时修改样式触发强制重绘
  requestAnimationFrame(() => {
    document.body.style.transform = 'translateZ(0)';
    setTimeout(() => {
      document.body.style.transform = '';
    }, 0);
  });
});

3. 排查页面资源加载问题 #

检查弹窗页面的CSS、JS资源是否存在加载阻塞或失败的情况，比如给脚本添加defer或async属性，避免阻塞DOM渲染：

<script src="your-script.js" defer></script>

4. 临时切换窗口类型测试 #

如果业务允许，临时将窗口类型改为type: "normal"，看看是否还会出现空白问题，以此排除Popup类型的特殊渲染限制。

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