Chrome刷新页面时HTML元素随机偏移直至靠屏左侧如何解决

问题成因分析 #

该随机偏移问题是新版Chrome浏览器与旧版Bootstrap 2.3.2的渲染兼容问题+CSS写法缺陷+加载时序差异共同导致的，核心诱因有三个：

1. CSS写法错误导致元素超出视口，触发横向滚动条的时机随机
2. 纵向滚动条渲染时机不固定，导致视口宽度计算偏差
3. 负z-index固定元素的渲染优先级低，布局计算容易出现随机误差

修复方案 #

按优先级依次尝试以下操作：

• 修复#user-header-actions的CSS错误：删除该元素样式中的width: 100%属性。块级元素默认会自动占满剩余可用宽度，手动设置100%宽度再叠加左外边距会导致元素总宽度超出视口，随机触发横向滚动条引发布局偏移。
• 提前预留滚动条位置：在全局CSS中添加如下规则，强制浏览器始终显示纵向滚动条，避免渲染过程中滚动条突然出现导致视口宽度变化：

html {
  overflow-y: scroll;
}

• 修正负z-index配置：将#header的z-index: -9修改为正数值（比如z-index: 2，只要低于#user-header-actions的z-index 10即可），避免负层级元素的随机渲染异常。
• 强制页面加载完成后重绘布局：如果上述操作仍未解决问题，添加以下JS代码，强制浏览器在所有资源加载完成后重新计算全页布局，消除随机渲染误差：

window.addEventListener('load', function() {
  document.body.style.display = 'none';
  document.body.offsetHeight;
  document.body.style.display = '';
});

• 排查浏览器扩展影响：使用Chrome隐身模式访问页面测试，如果隐身模式下无复现，说明是第三方扩展注入的DOM/CSS导致的偏移，逐个禁用扩展排查即可。

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