CSS旋转后可点击区域与内容错位的Chrome专属问题

这个问题是Chrome早期版本（如105）处理CSS transform 时的已知行为：元素应用旋转变换后，点击命中区域（触发onClick和cursor: pointer的区域）没有跟随视觉元素同步更新，仍然基于元素变换前的原始布局位置计算，而Firefox和Safari在这方面的渲染逻辑更贴合视觉表现，所以没有出现偏移。

可行解决方案 #

1. 显式设置变换原点并启用渲染优化 #

给按钮元素添加transform-origin明确旋转中心，同时通过will-change: transform提示Chrome优化该元素的渲染，确保命中区域与视觉位置同步：

.toggle-button {
  cursor: pointer;
  transform: rotate(90deg);
  /* 明确变换原点，根据布局调整，比如中心旋转 */
  transform-origin: center center;
  /* 提示浏览器优化变换渲染 */
  will-change: transform;
}

2. 调整指针事件作用范围 #

检查父元素是否存在pointer-events的特殊设置，确保按钮本身的pointer-events为默认值auto；或者将点击事件绑定到按钮的父容器，同时让容器尺寸适配变换后的按钮：

.button-container {
  /* 适配变换后按钮的尺寸，比如按钮旋转后宽度变高度 */
  width: 24px;
  height: 24px;
  cursor: pointer;
}
.toggle-button {
  transform: rotate(90deg);
  transform-origin: center;
  /* 让按钮不拦截指针事件，交由父容器处理 */
  pointer-events: none;
}

随后将onClick事件绑定到.button-container上。

3. 使用伪元素承载旋转效果 #

把旋转的视觉效果放在伪元素上，让按钮本身的布局位置与视觉位置一致，命中区域自然匹配：

.toggle-button {
  cursor: pointer;
  width: 24px;
  height: 24px;
  position: relative;
}
.toggle-button::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* 放置按钮的视觉样式，比如图标、边框等 */
  background: url("your-icon.svg") center no-repeat;
  transform: rotate(90deg);
}

按钮本身的布局区域即为点击区域，伪元素负责旋转的视觉表现，不会出现偏移。

4. 升级Chrome版本 #

该问题在Chrome后续更新（如110+版本）中已被修复，升级到较新版本的Chrome可直接解决问题。

内容的提问来源于stack exchange，提问作者Simon A. Eugster