iOS Safari中jQuery设置TD元素CSS样式点击失效滚动后恢复求助

这是个典型的iOS Safari渲染层延迟刷新问题，我之前做影院选座功能时也踩过一模一样的坑😅。本质原因是iOS Safari为了优化性能，会把一些样式变更攒起来，等到页面滚动等触发重排/重绘的操作时才一起更新，导致你的行内样式设置不会立即生效。

给你几个靠谱的解决办法，按推荐程度排序：

1. 用CSS类代替直接操作行内样式（最推荐） #

这是最优雅也最能从根源避免问题的方式，把样式定义在CSS里，点击时只需要添加类：

/* 先定义选中状态的样式 */
.seat.selected {
  background-color: #0388d1;
  color: white;
}

// 点击事件里替换成添加类
$('td.seat').on('click', function() {
  $(this).addClass('selected');
  // 你的其他显示/隐藏逻辑...
});

这种方式不仅能让浏览器更准确地识别样式变化并触发重绘，还能让代码结构更清晰，后续修改样式也不用动JS，维护起来方便很多。

2. 手动触发浏览器重绘（如果必须用行内样式） #

如果因为某些原因一定要直接设置行内样式，可以通过访问一个会触发重排的属性，强制浏览器立即更新渲染：

$('td.seat').on('click', function() {
  const $seat = $(this);
  // 设置样式
  $seat.css({
    'background-color': '#0388d1',
    'color': 'white'
  });
  // 强制触发重绘：访问offsetHeight会让浏览器立即计算元素布局
  void $seat[0].offsetHeight;
});

void关键字是为了避免控制台输出不必要的数值，不影响功能，也可以直接写$seat[0].offsetHeight;。

3. 利用GPU加速触发重绘 #

另一个小技巧是给元素添加一个不影响视觉的GPU变换，让浏览器把元素放到单独的渲染层，强制更新：

$('td.seat').on('click', function() {
  const $seat = $(this);
  $seat.css({
    'background-color': '#0388d1',
    'color': 'white',
    'transform': 'translateZ(0)' // 触发GPU加速，强制重绘
  });
});

这个方法也能解决问题，但如果页面中有大量元素，频繁触发GPU加速可能会有性能隐患，所以优先推荐前两种方法。

额外注意点 #

• 测试前记得清空iOS Safari的缓存，有时候旧缓存会导致奇怪的渲染问题；
• 如果你还需要处理取消选中的逻辑，记得对应实现removeClass或者样式重置的逻辑哦。

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