This appears to be an issue related to how Chrome handles both hover behavior and transitions after layout shifts. In Safari, after clicking a button, the hover effect remains on the button even if the cursor is already over a new row; in Chrome, the behavior is the opposite. Interestingly, the transition effect itself lingers.

Inspecting the computed background-color in DevTools shows the expected value #fff, but what is actually rendered is a lingering transition between the hover color and #fff.

If transition-duration is set to 0 or the transition is removed, the issue disappears. I'm not entirely sure why this happens, but a practical workaround is to introduce a very small transition-delay, which also resolves the issue.

You can try adjusting the transition-duration locally to observe this behavior. I'm not sure why the issue disappears after modifying the row’s background-color in the playground.

  @include m(enable-row-transition) {
    .#{$namespace}-table__body td.#{$namespace}-table__cell {
      transition: background-color 1s ease;
    }
  }

  @include m(enable-row-hover) {
    .#{$namespace}-table__body tr:hover > td.#{$namespace}-table__cell {
      background-color: red;
    }
  }

fix #23955

demo

Summary by CodeRabbit

• Style
  • Refined table row background-color transition by adding a tiny delay to make row state changes feel smoother and more visually consistent during interactions (e.g., hover, selection), reducing flicker on quick transitions.