Vite React TS开发：Chrome日期选择器周几区块有间隙，Firefox正常

问题描述 #

使用Vite + React + TypeScript开发项目时，日期选择器的周几区块在Chrome浏览器中出现奇怪的间隙或线条，但Firefox中显示正常。尝试过将容器改为flexbox/grid布局、将div替换为span，均未解决问题。

相关代码 #

App组件 #

function App() {
  return (
    <div>
      <DatePicker />
    </div>
  );
}

DatePicker组件 #

function DatePicker() {
  return (
    <div className="datepicker-wrapper">
      <input />
      <input />

      <Calendar />
    </div>
  );
}

Calendar组件 #

function Calendar() {
  return (
    <div className="datepicker-popper">
      <div className="datepicker-weekday">Sunday</div>
      <div className="datepicker-weekday">Monday</div>
      <div className="datepicker-weekday">Tuesday</div>
      <div className="datepicker-weekday">Wednesday</div>
      <div className="datepicker-weekday">Thursday</div>
      <div className="datepicker-weekday">Friday</div>
      <div className="datepicker-weekday">Saturday</div>
    </div>
  );
}

CSS样式 #

body {
  margin: 0;
}

.datepicker-wrapper {
  position: relative;
  font-family: monospace;
  display: flex;
  gap: 2rem;
}

.datepicker-popper {
  position: absolute;
  bottom: -0.8rem;
  left: 50%;

  translate: -50% 100%;

  box-sizing: border-box;
  padding: 0.3rem;
  width: 100%;

  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
  border-radius: 0.6rem;
}

.datepicker-weekday {
  display: block;
  background-color: palevioletred;
}

问题原因 #

该差异是Chrome浏览器的亚像素渲染/像素对齐机制导致的：当元素通过translate进行百分比偏移时，计算后的像素值可能为小数，Chrome会尝试渲染这些亚像素，从而产生视觉上的间隙或线条；而Firefox的渲染引擎对亚像素的处理方式不同，不会出现此类问题。

解决方案 #

以下几种方法均可解决该问题，任选其一即可：

方法1：开启硬件加速强制像素对齐 #

给.datepicker-popper添加transform: translateZ(0)，触发Chrome的硬件加速，强制渲染引擎对齐像素：

.datepicker-popper {
  /* 保留原有样式 */
  transform: translateZ(0);
}

方法2：负边距抵消间隙 #

给.datepicker-weekday设置负边距，抵消可能出现的亚像素间隙：

.datepicker-weekday {
  /* 保留原有样式 */
  margin: -1px;
}

方法3：使用整数像素偏移 #

将translate: -50% 100%;替换为具体的整数像素值（需根据实际布局调整），避免百分比计算产生的小数像素：

.datepicker-popper {
  /* 替换原有translate属性 */
  translate: -50% calc(100% + 1px);
}

内容的提问来源于stack exchange，提问作者Aadi-23