如何解决IE和Safari中AngularJS固定表头及左侧列的表格闪烁问题

看起来你遇到了Angular实现的固定表头表格在旧浏览器（IE）和Safari上的滚动闪烁问题，这俩浏览器在处理元素固定和滚动重绘的时候确实容易出幺蛾子。我来分享几个经过验证的解决方案：

1. 开启硬件加速减少重绘闪烁 #

IE和Safari在滚动时频繁重绘未优化的元素会导致闪烁，我们可以通过CSS触发硬件加速，让浏览器用GPU来处理渲染：

.sticky-header, .sticky-column {
  /* 触发硬件加速，避免重绘闪烁 */
  transform: translateZ(0);
  -webkit-transform: translateZ(0); /* 兼容Safari/旧版Chrome */
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  perspective: 1000px;
  -webkit-perspective: 1000px;
}

注意：别给太多元素加这个，过度使用可能会占用过多GPU资源，反而适得其反。

2. 优化Angular指令的滚动事件处理 #

你的指令里可能在滚动事件中频繁操作DOM或者触发$digest循环，这会加重浏览器负担。可以做这些优化：

• 使用$timeout的false参数避免触发脏检查：

  function handleScroll() {
    // 你的DOM定位/样式更新逻辑
    $timeout(function() {
      // 非核心的视图更新放在这里，避免每次滚动都触发Angular脏检查
    }, 0, false);
  }
  

• 给滚动事件加防抖，减少触发频率：
  如果项目里用了Lodash，可以直接用它的防抖函数：

  var debounceScroll = _.debounce(handleScroll, 16); // 约60fps的间隔
  angular.element(window).on('scroll', debounceScroll);
  

  不想引入Lodash的话，自己写个简单的防抖函数也可以：

  function debounce(func, wait) {
    var timeout;
    return function() {
      var context = this, args = arguments;
      clearTimeout(timeout);
      timeout = setTimeout(function() {
        func.apply(context, args);
      }, wait);
    };
  }
  

3. 替换position: sticky为兼容方案（针对IE） #

IE完全不支持position: sticky，如果你的指令是基于这个属性实现的，那肯定会有兼容性问题。可以改用两个重叠的表格方案：

• 一个表格只显示表头和固定左列，设置为position: fixed/absolute
• 另一个表格显示完整内容，滚动时通过JS同步固定部分的位置
  比如在你的指令模板里可以这么写：

<div class="sticky-table-container">
  <!-- 固定的表头和左列 -->
  <table class="sticky-overlay">
    <thead>
      <tr><th>固定表头1</th><th>固定表头2</th></tr>
    </thead>
    <tbody>
      <tr ng-repeat="row in rows">
        <td>{{row.fixedColumn}}</td>
      </tr>
    </tbody>
  </table>
  <!-- 可滚动的主表格 -->
  <table class="main-table" ng-transclude></table>
</div>

然后在滚动事件中同步sticky-overlay的位置，确保和主表格的滚动偏移对齐。

4. 关闭IE的平滑滚动 #

IE的默认平滑滚动有时候会加剧闪烁，可以通过CSS禁用：

html {
  -ms-overflow-style: none;
  scroll-behavior: auto !important;
}

最后测试的时候记得清空浏览器缓存，有时候旧的CSS/JS缓存会导致问题重现哦。

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